我有一个网站，有许多页面和不同的背景图片，我从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那样显示图像?
当前回答
实际上有一个非常简单的css解决方案，甚至可以在IE8上工作:
.container { position: relative; overflow: hidden; /* Width and height can be anything. */ width: 50vw; height: 50vh; } img { position: absolute; /* Position the image in the middle of its container. */ top: -9999px; right: -9999px; bottom: -9999px; left: -9999px; margin: auto; /* The following values determine the exact image behaviour. */ /* You can simulate background-size: cover/contain/etc. by changing between min/max/standard width/height values. These values simulate background-size: cover */ min-width: 100%; min-height: 100%; } <div class="container"> <img src="http://placehold.it/200x200" alt="" /> </div>
其他回答
对于IE6，你还需要包括第二行——width: 100%;
.mydiv img {
max-width: 100%;
width: 100%;
}
我找到了一个简单的解决方案来模拟覆盖和包含，这是纯CSS，适用于具有动态尺寸的容器，也没有对图像比例进行任何限制。
注意，如果你在16之前不需要支持IE或Edge，那么你最好使用object-fit。
background-size:封面
.img-container { position: relative; overflow: hidden; } .background-image { position: absolute; min-width: 1000%; min-height: 1000%; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%) scale(0.1); z-index: -1; } <div class="img-container"> <img class="background-image" src="https://picsum.photos/1024/768/?random"> <p style="padding: 20px; color: white; text-shadow: 0 0 10px black"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div>
在这里使用1000%是为了防止图像的自然大小大于它正在显示的大小。例如，如果图像是500x500，但容器只有200x200。使用这个解决方案，图像将被调整到2000x2000(由于min-width/min-height)，然后缩小到200x200(由于变换:scale(0.1))。
x10因子可以用x100或x1000来代替，但是在20x20的div上渲染2000x2000的图像通常不理想。:)
background-size:包含
Following the same principle, you can also use it to emulate background-size: contain: .img-container { position: relative; overflow: hidden; z-index: 0; } .background-image { position: absolute; max-width: 10%; max-height: 10%; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%) scale(10); z-index: -1; } <div style="background-color: black"> <div class="img-container"> <img class="background-image" src="https://picsum.photos/1024/768/?random"> <p style="padding: 20px; color: white; text-shadow: 0 0 10px black"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> </div>
你能做的是使用'style'属性将背景图像添加到元素中，这样你仍然会在HTML中调用图像，但你仍然能够使用background-size: cover css行为:
HTML:
<div class="image-div" style="background-image:url(yourimage.jpg)">
</div>
CSS:
.image-div{
background-size: cover;
}
这就是我如何将background-size: cover行为添加到我需要动态加载到HTML中的元素。然后你可以使用很棒的css类，如background-position: center。繁荣
我们可以采用ZOOM方法。我们可以假设，如果方面图像的高度或宽度小于所需的高度或宽度，最大30%(或更高至100%)可以是缩放效果。我们可以用overflow: hidden隐藏其他不需要的区域。
.image-container {
width: 200px;
height: 150px;
overflow: hidden;
}
.stage-image-gallery a img {
max-height: 130%;
max-width: 130%;
position: relative;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
这将调整不同宽度或高度的图像。
background:url('/image/url/') right top scroll;
background-size: auto 100%;
min-height:100%;
遇到完全相同的症状。以上对我来说很管用。
