我有一个网站，有许多页面和不同的背景图片，我从CSS显示它们，像这样:
body.page-8 {
background: url("../img/pic.jpg") no-repeat scroll center top #000;
background-size: cover;
}
但是，我想在一个页面上使用<img>元素显示不同的(全屏)图片，并且我希望它们具有与上面的background-image相同的属性:cover;属性(图像不能显示从CSS，他们必须显示从HTML文档)。
通常我使用:
div.mydiv img {
width: 100%;
}
Or:
div.mydiv img {
width: auto;
}
使画面饱满，反应灵敏。然而，当屏幕变得太窄时，图片会收缩太多(宽度:100%)，并在底部屏幕显示身体的背景色。另一种方法width: auto;只使图像完全大小，不响应屏幕大小。
是否有一种方法可以像background-size: cover那样显示图像?
当前回答
对于IE6，你还需要包括第二行——width: 100%;
.mydiv img {
max-width: 100%;
width: 100%;
}
其他回答
我需要模拟background-size: contains，但由于缺乏支持，不能使用对象匹配。我的图像有定义尺寸的容器，这最终为我工作:
.image-container { height: 200px; width: 200px; overflow: hidden; background-color: rebeccapurple; border: 1px solid yellow; position: relative; } .image { max-height: 100%; max-width: 100%; margin: auto; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; } <!-- wide --> <div class="image-container"> <img class="image" src="http://placehold.it/300x100"> </div> <!-- tall --> <div class="image-container"> <img class="image" src="http://placehold.it/100x300"> </div>
解决方案#1 -对象匹配属性(缺乏IE支持)
只需设置对象适合:覆盖;在img上。
身体{ 保证金:0; ｝ img { 显示:块; 宽度:100大众; 身高:100 vh; object-fit:封面;/*或object-fit:包含;* / ｝ <img src="https://loremflickr.com/1500/1000" alt="A random image from Flickr" />
关于object-fit: cover:
替换的内容大小保持其纵横比 填充元素的整个内容框。如果物体的纵横比 不匹配它的长宽比的盒子，那么对象会是什么 剪得合身。
对于object-fit:包含:
被替换的内容被缩放以保持其纵横比，同时适应元素的内容框。整个对象被用来填充方框，同时保留其长宽比，因此如果对象的长宽比与方框的长宽比不匹配，则该对象将被“字母盒化”。
另外，请参阅这个Codepen演示，它比较了应用于图像的object-fit: cover和应用于背景图像的background-size: cover
解决方案#2 -用css的背景图像替换img
身体{ 保证金:0; ｝ img { 位置:固定; 宽度:0; 高度:0; 填充:50vh 50vw; 背景:url(“https://loremflickr.com/1500/1000”)无重复; background-size:封面; ｝ <img src="https://via.placeholder.com/1500x1000" alt="A random image from Flickr" />
对于IE6，你还需要包括第二行——width: 100%;
.mydiv img {
max-width: 100%;
width: 100%;
}
background:url('/image/url/') right top scroll;
background-size: auto 100%;
min-height:100%;
遇到完全相同的症状。以上对我来说很管用。
使用CSS可以模拟对象匹配:[cover| include];使用transform和[max|min]-[width|height]。 它并不完美。这在一种情况下不起作用:如果图像比容器更宽或更短。
.img-ctr{ background: red;/*visible only in contain mode*/ border: 1px solid black; height: 300px; width: 600px; overflow: hidden; position: relative; display: block; } .img{ display: block; /*contain:*/ /*max-height: 100%; max-width: 100%;*/ /*--*/ /*cover (not work for images wider and shorter than the container):*/ min-height: 100%; width: 100%; /*--*/ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } <p>Large square: <span class="img-ctr"><img class="img" src="http://placehold.it/1000x1000"></span> </p> <p>Small square: <span class="img-ctr"><img class="img" src="http://placehold.it/100x100"></span> </p> <p>Large landscape: <span class="img-ctr"><img class="img" src="http://placehold.it/2000x1000"></span> </p> <p>Small landscape: <span class="img-ctr"><img class="img" src="http://placehold.it/200x100"></span> </p> <p>Large portrait: <span class="img-ctr"><img class="img" src="http://placehold.it/1000x2000"></span> </p> <p>Small portrait: <span class="img-ctr"><img class="img" src="http://placehold.it/100x200"></span> </p> <p>Ultra thin portrait: <span class="img-ctr"><img class="img" src="http://placehold.it/200x1000"></span> </p> <p>Ultra wide landscape (images wider and shorter than the container): <span class="img-ctr"><img class="img" src="http://placehold.it/1000x200"></span> </p>
