了解对象匹配 CSS 属性

Question

在这个article中我们可以读到：

The object-fit CSS property sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container.

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

父元素？包含块？

Answer 1

来自the specification：

The object-fit property specifies how the contents of a replaced element should be fitted to the box established by its used height and 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 将尝试覆盖由应用于元素的 width/height 定义的 200x200 区域。包含的 block/parent 元素在这里无关紧要，没有任何作用。

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

了解对象匹配 CSS 属性

Understanding object-fit CSS property

html

css

object-fit