logo标签列表

“object-fit: contain”和“max-width: 100%; max-height: 100%”有什么区别？（这是一个关于IT技术的提问标题）

htmlcss
4
我在使用 "object-fit: contain" 来调整图像大小时，发现它在 Internet Explorer / Edge 浏览器中无法正常工作。因此我改用了 "max-width: 100%; max-height: 100%;"，但我想知道这两种方法的区别在哪里？
也许这是一个愚蠢的问题，但我有些困惑。
4个回答
2

max-width和max-height属性可以防止图像超出容器范围。如果同时应用max-width:100%和max-height:100%，则图像将不会被拉伸，而是在容器内显示。

object-fit:contain：

使用object-fit contain时，需要定义图像的高度和宽度，否则它将超出容器范围。

使用object-fit属性，您可以将图像内容适配到样式表中指定的尺寸。contain值告诉图像缩小或放大自己，直到适合盒子并保持其纵横比。

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

1
它的行为与背景图像类似： contain 应该将图像适合容器，以便整个图像可见，并保持其原始宽高比。根据容器的比例，这可能导致宽度为100%或高度为100%，而其他参数设置为自动。
在大多数情况下，width: 100%; height: 100% 会扭曲图像：它会显示整个图像（没有切断任何内容），但会独立地拉伸两个参数。想象一下将200x200像素的图像放入400x600容器中：宽度将被拉伸到原来的两倍，而高度将被拉伸到原来的三倍高度 - 这将导致丑陋的扭曲。
如果将 object-fit: contain 应用于相同的示例（而不是 width: 100%; height: 100%），则新的img宽度将为400px（加倍），高度也将为400px，因为保持了比例，从而产生一些空白空间，但也呈现出一个不扭曲的图像。
0
在布局方面：
如果元素具有固定的纵横比，"max-width: 100%;max-height: 100%"的行为类似于object-fit: scale-down object-fit: contain确保对象的某个维度与其容器相匹配。在某些情况下，这看起来就像你只写了"width: 100%"或者"height: 100%"取决于对象和容器的纵横比。
另外... object-fit是专门用于替换元素，并不适用于大多数HTML元素。它不会改变HTML元素的大小，但会调整内部对象的大小。一个<img>标签中的图像将被调整大小，但<img>本身不会被调整大小。
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接