CSS object-fit 属性技术文档

概述

CSS object-fit 属性用于定义一个可替换元素的尺寸，其如何适应其容器。 可替换元素包括 video、 img 和一些表单元素。

语法

使用object-fit属性时，需要指定被置换元素的CSS选择器和想要应用于该元素的 object-fit 属性值。 如下例：

img {
  object-fit: fill;
}

在上述代码中，img 元素的 object-fit 属性值被设置为fill。

值

CSS object-fit 属性有五个可用的值：

• fill：此值会将替换元素展开以填充其容器的内容框。这可能导致图像出现扭曲或拉伸。

• contain：此值缩放替换元素以适合内容框。 该元素在容器内水平垂直居中。

• cover：此值缩放替换元素的大小，以便元素完全覆盖容器的内容框。 偏移替换元素以使其完全占据此区域。

• none：替换元素维持其本身的尺寸。

• scale-down：此值除了与"none"值一样使替换元素保持其本身尺寸之外，还应缩小替换元素以适合容器，但仅在替换元素的宽度或高度比容器小才会这样做。

使用案例

对图片进行裁剪

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

上述代码中，img 报告由包含

铺满屏幕的背景图片

.object-fit-cover {
  background: url(bg.jpg) no-repeat center center;
  background-size: cover;
}

上述代码中，

兼容性

注意事项

• object-fit属性只适用于可替换元素，如 img 元素。
• object-fit属性与 object-position 属性一起使用时效果更佳。
• IE不支持 object-fit 属性。 如果需要在 IE 中使用 object-fit，可以使用其他技术，如 JavaScript 或 SVG。