CSS object-fit 属性

剪掉图片的侧面，保留纵横比，并填充空间：

img.a {
width: 200px;
height: 400px;
object-fit: cover;
}

定义和用法

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

该属性告诉内容以多种方式填充容器；例如"preserve that aspect ratio" 或"stretch up and take up as much space as possible"。

默认值：	查看各个属性
遗传：	不
可动画：	不。阅读可动画的
版本：	CSS3
JavaScript 语法：	对象.style.objectFit="cover"尝试一下

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
object-fit	31.0	16.0	36.0	7.1	19.0

Value	Description	Demo
fill	This is default. The replaced content is sized to fill the element's content box. If necessary, the object will be stretched or squished to fit	Demo ❯
contain	The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box	Demo ❯
cover	The replaced content is sized to maintain its aspect ratio while filling the element's entire content box. The object will be clipped to fit	Demo ❯
none	The replaced content is not resized	Demo ❯
scale-down	The content is sized as if none or contain were specified (would result in a smaller concrete object size)	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit