Question

当我意识到它在Internet Explorer / Edge中不起作用时，我正在使用“object-fit：contains”来缩放图像。所以我切换到“max-width：100％; max-height：100％;”而我想知道差异在哪里？

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

Answer 1

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

Answer 2

max-width和max-height属性会阻止图像移出容器如果同时应用属性max-width：100％和max-height：100％，则图像将在没有拉伸的情况下显示在容器内。< / p>

object-fit：包含： -

使用object-fit包含你必须定义你的图像高度宽度，否则它将超出容器。

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 3

它的行为与背景图像相似：

Tab应该将图像放入容器中，以便整个图像可见，并保持其原始比例在宽度和高度之间。根据容器的比例，这可能导致100％宽度或 100％高度，而另一个参数设置为自动。

在大多数情况下，

contain会扭曲图像：它会显示整个图像（不会切断任何内容），但它会独立地拉伸这两个参数。想象一下放入400x600容器的200x200px图像：宽度将拉伸到原始的两倍，而高度将拉伸到原始高度的三倍 - 这将导致难看的失真。

如果width: 100%; height: 100%应用于同一个示例（而不是object-fit: contain的），则新的img宽度将为400px（= doubled），并且高度也将是400px，因为保留了比例，导致一些空白空间，但也出现在不失真的图像中。

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

3 个答案: