CSS中的object-fit属性是专用于img元素或video元素，用来定义元素内容与元素尺寸之间的适应关系。

---

浏览器兼容性

下表是每种浏览器支持object-fit属性的最低版本。

属性
object-fit	31.0	16.0	36.0	7.1	19.0

CSS object-fit属性

CSS中的object-fit属性是专用于img元素或video元素，用来定义元素内容与元素尺寸之间的适应关系。

因为img元素的图片原尺寸未必和元素在网页中的尺寸一致，甚至是相差很大，因此定义元素内容与尺寸之间关系的属性object-fit就应运而生了。该属性的取值范围如下：

object-fit属性	说明
fill	内容会被拉伸以填满指定尺寸（默认）
contain	内容会被等比例放大缩小至完全在指定尺寸内 （且保证内容至少有一条边等于指定尺寸）
cover	内容被等比例放大至以完全覆盖指定尺寸，超出部分会被剪切掉 （要保证内容的每条边都不小于指定尺寸）
none	内容以原尺寸居中插入，内容的尺寸不会做任何改变，四周超出部分会被剪切掉
scale-down	内容被等比缩小

案例源图如下，源图尺寸926px宽度，1290px高度。

案例1：fill

/* 其实object-fit就是fill */
img {
    width: 200px;
    height: 400px;
    object-fit: fill;
}

运行一下

案例2：contain

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

运行一下

案例3：cover

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

运行一下

案例4：none

img {
    width: 200px;
    height: 400px;
    object-fit: none;
}

运行一下

案例5：scale-down

img {
    width: 200px;
    height: 400px;
    object-fit: scale-down;
}

运行一下

---

上述的案例2和案例5的结果一样，那是因为图片的尺寸远大于元素预设尺寸；为了体现其间的区别，下面举另外一套示例。

---

示例源图如下所示，长度为60px，宽度也60px。

案例1：fill

/* 其实object-fit就是fill */
img {
    width: 200px;
    height: 400px;
    object-fit: fill;
}

运行一下

案例2：contain

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

运行一下

案例3：cover

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

运行一下

案例4：none

img {
    width: 200px;
    height: 400px;
    object-fit: none;
}

运行一下

案例5：scale-down

img {
    width: 200px;
    height: 400px;
    object-fit: scale-down;
}

运行一下