对于图像元素，有没有等价物background-size: cover和contain？
对于图像元素，有没有等价物background-size: cover和contain？
提问于 2012-07-26 21:55:21
我有一个有许多页面和不同背景图片的网站，我从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%;
}或者：
div.mydiv img {
width: auto;
}使图片丰满且响应性强。然而，当屏幕变得太窄时，图片会缩小太多(width: 100%)，并在屏幕底部显示身体的背景色。另一种方法是width: auto;，它只使图像全尺寸显示，而不响应屏幕大小。
有没有一种方法可以像background-size: cover一样显示图像？
回答 10
Stack Overflow用户
发布于 2015-02-28 02:30:21
假设你可以安排一个你想要填充的容器元素，这看起来是可行的，但感觉有点老土。本质上，我只是在更大的区域上使用min/max-width/height，然后将该区域缩放回原始尺寸。
.container {
width: 800px;
height: 300px;
border: 1px solid black;
overflow:hidden;
position:relative;
}
.container.contain img {
position: absolute;
left:-10000%; right: -10000%;
top: -10000%; bottom: -10000%;
margin: auto auto;
max-width: 10%;
max-height: 10%;
-webkit-transform:scale(10);
transform: scale(10);
}
.container.cover img {
position: absolute;
left:-10000%; right: -10000%;
top: -10000%; bottom: -10000%;
margin: auto auto;
min-width: 1000%;
min-height: 1000%;
-webkit-transform:scale(0.1);
transform: scale(0.1);
}<h1>contain</h1>
<div class="container contain">
<img
src="https://www.google.de/logos/doodles/2014/european-parliament-election-2014-day-4-5483168891142144-hp.jpg"
/>
<!-- 366x200 -->
</div>
<h1>cover</h1>
<div class="container cover">
<img
src="https://www.google.de/logos/doodles/2014/european-parliament-election-2014-day-4-5483168891142144-hp.jpg"
/>
<!-- 366x200 -->
</div>
Stack Overflow用户
发布于 2015-06-11 18:54:06
实际上有一个非常简单的css solution，它甚至可以在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>
Stack Overflow用户
发布于 2018-08-23 20:05:58
我找到了一个简单的解决方案来模拟封面和容器，它是纯CSS，适用于动态尺寸的容器，也不会对图像比例做任何限制。
请注意，如果你不需要支持IE或16之前的Edge，那么你最好使用object-fit。
背景-大小:封面
.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 (由于最小宽度/最小高度)，然后缩小到200x200 (由于transform: scale(0.1))。
x10因子可以由x100或x1000替换，但在20x20的div上渲染2000x2000图像通常并不理想。:)
背景-大小:包含
遵循相同的原则，您还可以使用它来模拟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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11670874
复制相关文章
相似问题
腾讯云开发者
