CSS object-fit 属性
定义和用法
object-fit
属性用于指定 <img> 或 <video> 如何调整大小以适应其容器。
此属性指示内容以多种方式填充容器;例如“保持纵横比”或“拉伸并占用尽可能多的空间”。
浏览器支持
表中的数字指定了完全支持该属性的第一个浏览器版本。
属性 | |||||
---|---|---|---|---|---|
object-fit | 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
CSS 语法
object-fit: fill|contain|cover|scale-down|none|initial|inherit;
属性值
值 | 描述 | 演示 |
---|---|---|
fill | 这是默认值。替换的内容尺寸会调整以填充元素的content box。如有必要,对象将被拉伸或挤压以适应 | 演示 ❯ |
contain | 替换的内容会按比例缩放以保持其纵横比,同时适应元素Entire content box。对象将被裁剪以适应 | 演示 ❯ |
cover | 替换的内容的尺寸会按比例缩放以保持其纵横比,同时填充元素的 Entire content box。对象将被裁剪以适应 | 演示 ❯ |
none | 替换的内容不会被调整大小 | 演示 ❯ |
scale-down | 内容尺寸的计算方式与指定 none 或 contain 相同(会导致一个更小的具体对象尺寸) | 演示 ❯ |
initial | 将此属性设置为其默认值。阅读关于initial | |
inherit | 从其父元素继承此属性。阅读关于inherit |
相关页面
CSS 教程:CSS object-fit
CSS 参考:CSS object-position
HTML DOM 参考:objectFit 属性