img适配之Object-fit

项目中有时候为了将图片更好的展示出来，会在img外面套一层盒子，img在内部宽度定义百分比，高度不定义(或者高度百分比，宽度不定义)，自适应撑开；如下：

<div className="imgBox">
	<img alt="" src="![在这里插入图片描述](https://img-blog.csdnimg.cn/2019102712352066.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNTcyMTg4,size_16,color_FFFFFF,t_70)" />
</div>

.imgBOx {
	width: 200px;
	height: 200px;
	img {
		width: 100%;
	}
}

这种适配方案仍有许多的局限性，对于有的图片长宽比过大很不友好；所以一般的网页对于图片有了放大查看图片的效果，并附加放大，缩小，旋转等附加效果；
有一次无意中发现Object-fit属性，简直感叹现在的浏览器对于HTML 页面太又好了，减少了图片的适配问题；
object-fit有5个属性值：
none：未设置任何效果，保持原有大小；
contain：根据窗口大小一定等比例的进行缩小展示，（我一般都是使用该属性，完美适配）；
scale-down：大小与none和contain 中的一个保持一致，取决于哪一个会更小；
cover：保持比例填充满窗口，所以容易出现被裁剪的效果；
fill：内容充满所定窗口，不建议使用，容易有变形效果；

<img alt="" src="![在这里插入图片描述](https://img-blog.csdnimg.cn/2019102712352066.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNTcyMTg4,size_16,color_FFFFFF,t_70)" />

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

同类型还有一个object-position属性，限制元素在所定窗口中的位置；有兴趣的可以了解一下哦！