我希望我的背景图像根据浏览器视口的大小进行拉伸和zoom .

I've seen some questions on Stack Overflow that do the job, like Stretch and scale CSS background for example. It works well, but I want to place the image using background, not with an img tag.

其中放置了一个img标签,然后使用CSS向img标签致敬.

width:100%; height:100%;

它可以工作,但是这个问题有点老了,并且声明在CSS3中调整背景图像的大小会很好地工作.我试过这个example the first one,但对我不起作用.

background-image申报有什么好办法吗?

推荐答案

CSS3有一个很不错的小属性,名为background-size:cover.

这将zoom 图像,以便背景区域完全被背景图像覆盖,同时保持纵横比.整个地区都会被覆盖.但是,如果调整大小的图像的宽度/高度太大,则图像的一部分可能不可见.

Css相关问答推荐

NextJs - Tailwind css类样式未应用于响应屏幕

如果父元素是弹性元素,则不会显示带有纵横比的空div

不明白为什么 div 不均匀并且不填满页面

我如何使用 CSS 在我的应用程序中每隔 3 位用逗号分隔数字?

CSS Select 器在 rvest 中找到,在 RSelenium 中找不到

如何在保持默认外观的同时更改 javaFX 中按钮的突出显示 colored颜色

将框架放入 bootstrap 模式的正确方法是什么?

CSS 仅过渡背景 colored颜色

如何在父叠加层之上呈现子子

具有自动调整大小的自动填充行的 CSS 网格

使用之前和之后为锚标签添加画笔描边效果

如何始终在浏览器中显示垂直滚动条?

范围内的 CSS 未在组件中应用

CSS:在图像周围创建白光

修复 Mobile Safari (iPhone) 上文本呈现不一致且某些字体比其他字体大的字体大小问题?

名称-值对的语义和 struct

如何将文本向左旋转 90 度并根据 html 中的文本调整单元格大小

go 除文本输入的内阴影

使用没有设置宽度或高度的边界半径的胶囊形状?

CSS属性中的auto值是什么意思.