CSS background-size contain 与cover的区别

最近在重温CSS，发现好多东西都忘了，比如background－size属性中，contain与cover的区别。

菜鸟教程上是这么说的：

 

有点难理解，通俗解释就是：两者均以保持图像宽高比的形式缩放来适合背景容器的大小。

那么两者的区别呢？这就要根据图像是否重复来分别讨论了。

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

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

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

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

在repeat情况下：cover:与上述相同；contain:容器内至少有一张完整的图，容器留白区域则平铺背景图，铺不下的再裁掉。