object-fit,具体有5个值(默认值:fill):
.fill { object-fit: fill; }
.contain { object-fit: contain; }
.cover { object-fit: cover; }
.none { object-fit: none; }
.scale-down { object-fit: scale-down; }
每个属性值的具体含义如下(自己理解的白话文,官方释义见官网):
- fill: 中文释义“填充”。默认值。图片会铺满整个容器,所以会改变原有的比例,但是没有空白。
- contain: 中文释义“包含”。图片保持原有比例,全部展示在容器,但是因为保持原有比例,会有空白。如果容器远远大于图片的大小,会按比例扩大,会失真,就是图片糊了。
- cover: 中文释义“覆盖”。保持原有尺寸比例。宽度和高度至少有一个和容器一致。因此,此参数可能会让替换内容(如图片)部分区域不可见。
- none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。
- scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。不会失真,即使容器很大很大,比这张图片的像素大很多,也不会扩大,还是保持原始的像素,保持图片原来的大小。
scale-down与contain的区别(以下展示的图片的尺寸为228px* 142px):
contain就像是大丈夫能屈能伸的样子
- 如果容器的比图片的小,比如容器是64px * 64px,但是图片只有228px* 142px;那么contain和scale-down视觉上没有任何区别;如下图所示:
- 果容器的比图片的大,比如容器是500px * 500px,但是图片只有228px* 142px;
contain:会将图片按原比例拉伸,那么势必会导致图片失真,会糊掉;
scale-down(老子多大就多大):还是按照原来的像素展示,不会拉伸,不会失真;
如下图所示:
容器的尺寸是64*64, 背景色是白色,边框为红色,如下CSS代码:
.box > img {
height: 64px;
width: 64px;
border:2px solid red;
background-color: green;
}