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 属性的所有可能值
示例
.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 坐标进行定位 |
