CSS object-fit属性

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

CSS object-fit 属性

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

该属性告诉内容以多种方式填充容器；例如"preserve that aspect ratio" 或"stretch up and take up as much space as possible"。

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

但是，如果我们将上面的图片设置为宽度的一半（200 像素）和相同的高度（300 像素），它将如下所示：

我们看到图片被压缩以适合 200x300 像素的容器（其原始纵横比被破坏）。

这里是object-fit属性。object-fit属性可以采用以下值之一：

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

使用对象拟合：覆盖；

如果我们使用object-fit: cover;图片保持其纵横比并填充给定的尺寸。图片将被裁剪以适合：

使用对象适合：包含；

如果我们使用object-fit: contain;图片保持其纵横比，但调整大小以适合给定尺寸：

使用对象适合：填充；

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

使用对象拟合：无；

如果我们使用object-fit: none;图片未调整大小：

使用对象拟合：缩小；

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

另一个例子

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

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

示例

亲自试一试 »

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

示例

亲自试一试 »

CSS object-fit 更多示例

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

CSS 对象-* 属性

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