图片的展示：css3 之 object-fit

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; }
每个属性值的具体含义如下（自己理解的白话文，官方释义见官网）：

1. fill: 中文释义“填充”。默认值。图片会铺满整个容器，所以会改变原有的比例，但是没有空白。
2. contain: 中文释义“包含”。图片保持原有比例，全部展示在容器，但是因为保持原有比例，会有空白。如果容器远远大于图片的大小，会按比例扩大，会失真，就是图片糊了。
3. cover: 中文释义“覆盖”。保持原有尺寸比例。宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见。
4. none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。
5. scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。不会失真，即使容器很大很大，比这张图片的像素大很多，也不会扩大，还是保持原始的像素，保持图片原来的大小。

scale-down与contain的区别（以下展示的图片的尺寸为228px* 142px）：

contain就像是大丈夫能屈能伸的样子

1. 如果容器的比图片的小，比如容器是64px * 64px，但是图片只有228px* 142px；那么contain和scale-down视觉上没有任何区别；如下图所示：
   
2. 果容器的比图片的大，比如容器是500px * 500px，但是图片只有228px* 142px；
   contain：会将图片按原比例拉伸，那么势必会导致图片失真，会糊掉；
   scale-down(老子多大就多大)：还是按照原来的像素展示，不会拉伸，不会失真；
   如下图所示：
   

容器的尺寸是64*64, 背景色是白色，边框为红色，如下CSS代码：

.box > img {
height: 64px;
width: 64px;
border:2px solid red;
background-color: green;
}

首先展示原图：

object-fit五个属性值效果截图