“object-fit：contains”和“max-width：100％; max-height：100％”有什么区别？

Question

当我意识到它在Internet Explorer/Edge中不起作用时，我正在使用“object-fit：contains”缩放图像。所以我换成了“最大宽度：100％;最大高度：100％;”我想知道差异在哪里？

也许这是一个愚蠢的问题，但我有点困惑。

Answer 1

它不工作，因为它不支持IE/Edge。 http://caniuse.com/#feat=object-fit

Answer 2

max-width和max-height属性阻止图像走出容器如果同时应用属性最大宽度：100％和最大高度：100％，则图像将显示为无拉伸，并且在容器。

对象的配合：包含： -

随着对象配合包含你要定义你的形象的高度宽度否则将容器外面去。

使用object-fit属性，可以将图像的内容放入您在样式表中指定的尺寸。 包含值会告诉图像缩小或放大，直到它保持其纵横比时才放入盒子。

.first-item { 
 
    height: 200px; 
 
    width: 200px; 
 
    margin-bottom: 10px; 
 
} 
 

 
.second-item { 
 
    height: 200px; 
 
    width: 200px; 
 
    margin-bottom: 10px; 
 
} 
 

 
.first-item img { 
 
    max-height: 100%; 
 
    max-width: 100%; 
 
} 
 

 
.second-item img { 
 
    object-fit: contain; 
 
}

<div class="first-item"> 
 
    <img src="http://perform-ers.com/images/channel/logo/8f4beb43c0b80dd46228cb87364f4196.jpg" class="grid-img"> 
 
</div> 
 
<div class="second-item"> 
 
    <img src="http://perform-ers.com/images/channel/logo/8f4beb43c0b80dd46228cb87364f4196.jpg" class="grid-img"> 
 
</div>

Answer 3

它同样表现为背景图片：

contain应的图像放入容器中，以便整个图像将是可见的，并且它保持与原来的比例宽度和高度。取决于容器的比例，这可以导致100％宽度，或100％高度，而另一个参数被设置为自动。

width: 100%; height: 100%将在大多数情况下扭曲图像：它会显示整个图像（不切断任何东西），但它会独立拉伸两个参数。想象一下放入400x600容器的200x200px图像：宽度将被拉伸到原来的两倍，而高度将被拉伸到信号高度的三倍 - 这将导致难看的扭曲。

如果object-fit: contain被施加到相同的例子（的width: 100%; height: 100%代替），新的IMG宽度将是400像素（=加倍），和高度也将是400像素，由于比例被保持，从而导致一些空空间，但也在不是扭曲的图像。