background-size：contain 与cover的区别（转载）

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

不同之处在于：
1.  在no-repeat情况下，如果容器宽高比与图片宽高比不同，

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

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

2.  在repeat情况下：

        cover:与上述相同；

        contain:容器内至少有一张完整的图，容器留白区域则平铺背景图，铺不下的再裁掉。

 

background-size 在ie7\8的兼容写法：用filter滤镜

至于ie6?我至今不知道ie6咋个整。如果你知道，请务必告诉我~

css中加入一句：

 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/justice.jpg',sizingMethod='scale');

sizingMethod：“scale|crop|image” 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。crop：剪切图片以适应对象尺寸。 
image：默认值。增大或减小对象的尺寸边界以适应图片的尺寸。 
scale：缩放图片以适应对象的尺寸边界。

PS:注意：如果设置了background-attachment:fixed;会是background-size属性失效

 

原文地址：https://www.cnblogs.com/hamsterPP/p/5205976.html