CSS object-fit 属性

CSS object-fit 属性用于指定 <img> 或 <video> 如何调整大小以适应其容器。

CSS object-fit 属性

CSS object-fit 属性用于指定 <img> 或 <video> 如何调整大小以适应其容器。

此属性通过多种方式告诉内容填充容器，例如“保留宽高比”或“拉伸并占据尽可能多的空间”。

看下面这张来自巴黎的图片。这张图片宽 400 像素，高 300 像素。

但是，如果我们给上面的图片设置宽度为原来的一半（200 像素），高度不变（300 像素），它看起来会是这样：

我们看到图片被压扁以适应 200x300 像素的容器（其原始宽高比被破坏了）。

这就是 object-fit 属性的用武之地。 object-fit 属性可以取以下值之一：

• fill - 这是默认值。图片将被调整大小以填充指定尺寸。如有必要，图片将被拉伸或压缩以适应。
• contain - 图片保持其宽高比，但会调整大小以适应指定尺寸。
• cover - 图片保持其宽高比并填充指定尺寸。图片将被裁剪以适应。
• none - 图片不会被调整大小。
• scale-down - 图片将被缩小到 none 或 contain 的最小版本。

使用 object-fit: cover;

如果我们使用 object-fit: cover;，图片将保持其宽高比并填充指定尺寸。图片将被裁剪以适应。

使用 object-fit: contain;

如果我们使用 object-fit: contain;，图片将保持其宽高比，但会调整大小以适应指定尺寸。

使用 object-fit: fill;

如果我们使用 object-fit: fill;，图片将被调整大小以填充指定尺寸。如有必要，图片将被拉伸或压缩以适应。

使用 object-fit: none;

如果我们使用 object-fit: none;，图片不会被调整大小。

使用 object-fit: scale-down;

如果我们使用 object-fit: scale-down;，图片将被缩小到 none 或 contain 的最小版本。

另一个示例

这里我们有两个图片，我们希望它们填充浏览器窗口宽度的 50%，高度的 100%。

在下面的示例中，我们 **不** 使用 object-fit，因此当我们调整浏览器窗口大小时，图片的宽高比将被破坏。

示例

自己动手试一试 »

在下一个示例中，我们使用 object-fit: cover;，因此当我们调整浏览器窗口大小时，图片的宽高比得以保留。

示例

自己动手试一试 »

 CSS object-fit 更多示例

下面的示例在一个示例中演示了 object-fit 属性的所有可能值。

CSS Object-* 属性

下表列出了 CSS object-* 属性。