前端必知必会-CSSobject-fit 属性

---

CSS object-fit 属性

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

此属性指示内容以各种方式填充容器；例如“保留该纵横比”或“拉伸并占用尽可能多的空间”。

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

但是，如果我们将上面的图片设置为其宽度的一半（200 像素）和相同的高度（300 像素），它将看起来像这样：

示例

img {
width: 200px;
height: 300px;
}

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

这就是 object-fit 属性的作用所在。object-fit 属性可以采用以下值之一：

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

使用 object-fit: cover;

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

示例

img {
width: 200px;
height: 300px;
object-fit: cover;
}

使用 object-fit: contain;

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

示例

img {
width: 200px;
height: 300px;
object-fit: contain;
}

使用 object-fit: fill;

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

示例

img {
width: 200px;
height: 300px;
object-fit: fill;
}

使用 object-fit: none;

如果我们使用 object-fit: none; 图像不会调整大小：

示例

img {
width: 200px;
height: 300px;
object-fit: none;
}

使用 object-fit: scale-down;

如果我们使用 object-fit: scale-down; 图像会缩小到最小版本，即无或包含：

示例

img {
width: 200px;
height: 300px;
object-fit: scale-down;
}

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

在以下示例中，我们没有使用 object-fit，因此当我们调整浏览器窗口大小时，图像的纵横比将被破坏：

示例

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

示例

CSS object-fit 更多示例

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

示例

.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}

CSS Object-* 属性

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

属性	描述
object-fit	指定应如何调整 <img> 或 <video> 的大小以适合其容器
object-position	指定应如何定位 <img> 或 <video>其“自己的内容框”内的 x/y 坐标

---

总结

本文介绍了CSSobject-fit 属性的使用，如有问题欢迎私信和评论