了解适合对象的CSS属性

如何解决了解适合对象的CSS属性

在此article中，我们可以阅读：

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

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

父元素？包含块？

解决方法

来自the specification：

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区域，该区域由应用于元素的宽度/高度定义。包含的块/父元素在这里无关紧要，不起作用。

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

相关：

How does object-fit work with canvas element?

CSS object-fit: contain; is keeping original image width in layout