理解object-fit CSS属性

Question

在这篇文章中，我们可以阅读到：

object-fit CSS 属性设置替换元素（例如 <img> 或 <video>）的内容应如何调整大小以适合其容器。

在这种情况下，“容器”是什么意思？

父元素？包含块？

回答：在这里，“容器”指的是父元素。

- tonitone120

Answer 1

来自 规范：

object-fit属性指定了如何适应替换元素的内容到其使用的高度和宽度所建立的框中。

因此，它既不是父级元素也不是包含块，而是元素本身。这是元素与其内容之间的关系。 object-fit根据元素的尺寸改变内容的行为。

以下是使用相同包含块的不同元素的示例：

img {
  object-fit: cover;
  border: 2px solid;
  width: 200px;
  height: 200px
}

<img src="https://picsum.photos/id/10/500/400">
<img src="https://picsum.photos/id/10/800/400">
<img src="https://picsum.photos/id/10/500/1000">
<img src="https://picsum.photos/id/10/600/300">

在上述所有情况下，object-fit会尝试覆盖由应用于元素的宽度/高度定义的200x200区域。包含块/父元素在这里是无关紧要的，不起任何作用。

在同一规范中，您还可以阅读关键词“内容框”或“元素的内容框”，这是您要寻找的容器。

相关资料： 如何在canvas元素中使用object-fit？ CSS object-fit: contain;使原始图像宽度保持不变

- Temani Afif