background-size cover和contain的区别

如果是学习前端的同学加个微信cannywill做个朋友，能帮尽量帮，一起进步鸭

转自于:http://www.w3school.com.cn/cssref/pr_background-size.asp

相同点：图片都是等比例缩放

不同点：cover是铺满整个显示区域。如果显示比例和显示区域的比例相差很大某些部分会不显示

比如下面这张图，宽比高大很多，使用cover那么两边的就不会显示

 

 background:#ccc url(111.jpg) no-repeat center top; background-size: cover;

 

显示结果：

两边的去掉很多，如果图片很小就会放大到没有空白，其中一边就会不显示

 

 

contain：正好相反，他是按照某一边来覆盖显示区域的，会有白边

还是上面那张图，他按照宽度来适应显示区域，按照等比例那么高度就会很矮