对于图像元素，有没有等价物background-size: cover和contain？
我有一个有许多页面和不同背景图片的网站，我从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一样显示图像？
回答 14
Stack Overflow用户
发布于 2014-11-17 15:05:42
解决方案#1 - object-fit property (Lacks IE support)
只需在img上设置object-fit: cover;即可。
body {
margin: 0;
}
img {
display: block;
width: 100vw;
height: 100vh;
object-fit: cover; /* or object-fit: contain; */
}<img src="http://lorempixel.com/1500/1000" />
请参阅MDN -关于object-fit: cover
将替换内容的大小调整为在填充元素的整个内容框的同时保持其纵横比。如果对象的纵横比与其长方体的纵横比不匹配，则对象将被裁剪以适合。
而对于object-fit: contain
将缩放替换的内容以保持其纵横比，同时使其适合元素的内容框。整个对象将填充方框，同时保留其纵横比，因此，如果对象的纵横比与方框的纵横比不匹配，则对象将被"letterboxed“。
另请参阅将应用于图像的object-fit: cover与应用于背景图像的background-size: cover进行比较的this Codepen demo
解决方案#2 -使用css将img替换为背景图像
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" />
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>
https://stackoverflow.com/questions/11670874
复制相似问题
腾讯云开发者
