html - 了解适合对象的 CSS 属性

Question

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

object-fit CSS 属性设置如何调整替换元素的内容，例如<img>or <video>，以适应其容器。

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

父元素？包含块？

Answer 1

从规范：

object-fit 属性指定被替换元素的内容应如何适合由其使用的 height 和 width 建立的框。

所以它既不是父元素也不是包含块，而是元素本身。这是元素与其内容之间的关系。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由应用于元素的宽度/高度定义的区域。包含块/父元素在这里无关紧要并且不起作用。

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

有关的：

对象适合如何与画布元素一起使用？

CSS对象适合：包含；在布局中保持原始图像宽度