CSS object-fit 属性

此 CSS 属性指定视频或图像如何调整大小以适应其内容框。它定义了元素如何适合具有已建立的宽度和高度的容器。

它通常应用于图像或视频。此属性指定元素如何响应其容器的宽度和高度。

语法

值

此属性主要有以下五种值：

fill： 这是默认值。使用此值，整个对象会填满容器。替换内容的大小会调整以填充内容框。如果对象的纵横比与框的纵横比不匹配，则对象将被压缩或拉伸以适应框。即使图像的纵横比不匹配，它也会填满区域。

contain： 它会调整元素内容的尺寸，使其保持在容器内部。它会在保持图像纵横比的同时，将图像适应框的宽度和高度。替换内容会按比例缩放，以保持纵横比，同时适应元素的content box。

cover： 它会调整元素内容的尺寸，使其覆盖其容器。它会用图像填满整个框。如果对象的纵横比与框的纵横比不匹配，则会裁剪对象以适应。

none： 它不会调整替换内容的大小。图像将保留其原始尺寸，并忽略父项的高度和宽度。

scale-down： 它的大小调整方式为 none 或 contain。其结果是最小的对象尺寸。通过比较 none 和 contain 来找到最小的实际对象尺寸。

initial： 它将属性设置为默认值，即图像会拉伸以适应容器，因为默认值是 fill。

inherit： 它会继承其父元素的值。

现在，让我们通过每个值的示例来理解上述属性值。

示例：使用 fill 值

输出

示例：使用 contain 值

输出

示例：使用 cover 值

输出

示例：使用 none 值

输出

示例：使用 scale-down 值

输出