background-size:cover和contain的区别

background-size:cover;    //塞满(覆盖)
background-size:contain   //包含

两者均以保持图像宽高比的形式缩放来适合背景容器的大小
区别:
在no-repeat的情况下
cover:图片宽高比不变,铺满整个容器的宽高,图片多出来的部分会裁掉
contain:图片宽高比不变 ,缩放至图片完全展示出来,所以会有留白区域
在repeat情况下
cover:图片宽高比不变,铺满整个容器的宽高,图片多出来的部分会裁掉
contain:容器至少有一张完整的图,留白区域则平铺背景图,铺不下的再裁掉