其实关于图片等比例缩放的方法，之前已经尝试过css方法的object-fit了，但没实现到，所以选择了使用js来实现，于是前面就写了这篇文章：
今天看了资料发现object-fit其实是可以实现我想要的效果；
语法：
object-fit: fill | contain | cover | scale-down | none | initial | inherit;
属性值：
| 值 | 描述 |
|---|---|
| fill | 默认，不保证保持原有的比例，内容拉伸填充整个内容容器。 |
| contain | 保持原有尺寸比例，内容被缩放。 |
| cover | 保持原有尺寸比例，但部分内容可能被剪切。 |
scale-down |
保持原有尺寸比例，内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。 |
| none | 保留原有元素内容的长度和宽度，也就是说内容不会被重置。 |
| initial | 设置为默认值。 |
| inherit | 从该元素的父元素继承属性。 |
之前没实现图片等比例缩放并且居中显示，是因为没设置width与height值，想要图片在父元素中等比例自适应，只需将图片的width和height都设置为100%即可，下面就是图片等比例缩放并且居中显示的例子：
示例：
1、object-fit: cover | 保持原有尺寸比例，缩放至铺满父元素，但超出内容被剪切掉。
<div class="box">
<img class="img" src="./picture.jpg" alt="" />
</div>
.box {
width:300px;
height:400px;
margin:0 auto;
overflow: hidden;
}
.img {
width:100%;
height: 100%;
object-fit: cover;
}
原图尺寸：901 x 503 px
2、contain | 保持原有尺寸比例，内容被缩放至全部可见。
<div class="box">
<img class="img" src="./picture2.jpg" alt="" />
</div>
.box {
width:600px;
height:300px;
margin:0 auto;
overflow: hidden;
}
.img {
width:100%;
height: 100%;
object-fit: contain;
}
原图比例：508 x 668 px
剩下的属性就不一一举例了，大家可以自己多试试感受下。
另外，object-fit搭配object-position一起使用，就更加完美了，后续再写关于object-position的篇章；
