肉渣教程

CSS object-fit

上一节 下一节

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;
}

运行一下


CSS object-fit

上一节 下一节