CSS object-fit 属性
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;
}
上述代码中,
报告构成完整屏幕背景的容器。 值为cover的background-size属性将图像调整为完全覆盖内容框。兼容性
Chrome | Safari | Firefox | Opera | IE | Edge |
---|---|---|---|---|---|
31+ | 7.1+ | 36+ | 19+ | 11 | 12+ |
注意事项
- object-fit属性只适用于可替换元素,如 img 元素。
- object-fit属性与 object-position 属性一起使用时效果更佳。
- IE不支持 object-fit 属性。 如果需要在 IE 中使用 object-fit,可以使用其他技术,如 JavaScript 或 SVG。