前端自适应图片留白解决

大家都知道我们在前端学习的时候都接触过img标签，这个是前端开发常用标签，我们在前端培训班学习的时候经常会遇到加背景图片出现显示不全或者是留白的问题，接下来我们就简单分析一下前端培训学习中常遇到的图片问题。

项目中图片引入标签是img，但是想要图片显示在完整的设置好的div盒子容器中，前面我们用背景图可以设置background-size设置，那么img是如何设置的。

一：background-size： contain 与cover的区别：

作用： 都是将图片以相同宽高比缩放以适应整个容器的宽高。

不同之处在于：

在no-repeat情况下，如果容器宽高比与图片宽高比不同，

cover：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被隐藏。；

contain:图片自身的宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域；

其实，从英文的意思来说：cover意味着“遮罩、遮盖”—此处理解为“填满”较恰当，contain意为“包含”–也就是：我图片虽然缩放了，但是整个图是被“包含”在你里面的，显示是必须完整的、不能有一点隐藏。

在repeat属性的情况下：cover:与上述一样图片填满容器；contain:容器盒子内至少会有一张完整的图片，其他留白的区域则平铺背景图。

二：如果是img便签

object-fit: contain; // contain与cover与background-size一样的用法