我有一个包含许多页面和不同背景图片的网站,并且通过CSS显示它们,例如:
body.page-8 { background: url("../img/pic.jpg") no-repeat scroll center top #000; background-size: cover; }
但是,我想使用<img>元素在一页上显示不同的(全屏)图片,并且我希望它们具有与上述background-image: cover;属性相同的 属性(图像不能从CSS中显示,它们必须从HTML文档中显示)。
<img>
background-image: cover;
通常我使用:
div.mydiv img { width: 100%; }
要么:
div.mydiv img { width: auto; }
使图片饱满且反应灵敏。但是,width: 100%当屏幕太窄时,图片会缩小太多(),并在底部屏幕上显示主体的背景色。另一种方法,width: auto;只能使图像变为全尺寸,而不响应屏幕尺寸。
width: 100%
width: auto;
有没有一种显示图像的方法background-size: cover呢?
background-size: cover
只需object-fit: cover;在img上进行设置即可。
object-fit: cover;
body { margin: 0; } img { display: block; width: 100vw; height: 100vh; object-fit: cover; } <img src="http://lorempixel.com/1500/1000" />
参见MDN-关于object-fit: cover:
object-fit: cover
确定替换内容的大小,以在填充元素的整个内容框时保持其长宽比。如果对象的长宽比与框的长宽比不匹配,则对象将被裁剪以适合对象。
body { margin: 0; } img { position: fixed; width: 0; height: 0; padding: 50vh 50vw; background: url(http://lorempixel.com/1500/1000/city/Dummy-Text) no-repeat; background-size: cover; } <img src="http://placehold.it/1500x1000" />