background-size: length|percentage|cover|contain;
IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-size 属性。
CSS3 新增的 background-size 是一个很有用的属性，用于定义背景图片的尺寸，有了这个属性，你就可以任意指定背景图片的大小。其中最常用的值应该要数 cover 了，该值能让背景图片缩放至填满整个容器，即使是图片面积小于容器面积。
由于 background-size 是 CSS3 新增的属性，所以 IE 低版本自然就不支持了。
话不多说直接上图：
原图是一张330 * 250大小的图片如下：
放一个简单的布局，让child设置这张图为背景图，并给出background-size属性：
<!DOCTYPE html>
<html lang="utf-8">
<head>
<meta charset="UTF-8">
<title>IE 8 下兼容background-size</title>
<style>
.parent {
width: 400px;
height: 320px;
border: 1px solid #000;
}
.child {
width: 200px;
height: 150px;
border: 1px solid red;
background: url(./images/item-img.png) no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
看下IE 8下效果：
很明显，background-size: cover 这个属性并没有生效。
有一种解决方式是利用IE 提供的CSS渲染来处理：
AlphaImageLoader：在元素的背景和内容之间插入一张图片，并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。
语法格式：filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=Enabled , sizingMethod=Size , src=URL )
enabled：可选项，布尔值(Boolean)。设置或检索滤镜是否激活。
1）true：默认值。滤镜激活。 2）false：滤镜被禁止。
sizingMethod：可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
1）crop：剪切图片以适应对象尺寸。
2）image：默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
3）scale：缩放图片以适应对象的尺寸边界。
src：必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。*
将之前的样式修改一下：
.child {
width: 200px;
height: 150px;
border: 1px solid red;
background: url(./images/item-img.png) no-repeat;
background-size: cover;
/* 此处加上-ms前缀，让IE识别 */
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/item-img.png',sizingMethod='scale');
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/item-img.png',sizingMethod='scale');
/* \9 是 IE的CSS hack,IE9以下识别，不包括IE 9 */
background: none\9;
}
看下效果如何：
OK，貌似很不错，但是，有个问题就是IE 9下，如果图片是带透明的，会出现两个图片堆叠的状况，所以针对IE8 可以这么写，IE 8 +的话就要另寻他路了。
另外一种是老外发明的，老外写了一个 htc 文件，名叫 background-size polyfill，使用该文件能够让 IE7、IE8 支持 background-size 属性。其原理是创建一个 img 元素插入到容器中，并重新计算宽度、高度、left、top 等值，模拟 background-size 的效果。
修改一下child的样式：
.child {
width: 200px;
height: 150px;
border: 1px solid red;
background: url(./images/item-img.png) no-repeat;
background-size: cover;
/* 再次引入backgroundsize.min.htc，filter的那段删除 */
-ms-behavior: url(./backgroundsize.min.htc);
behavior: url(./backgroundsize.min.htc);
}
注意，[backgroundsize.min.htc](https://github.com/louisremi/background-size-polyfill/blob/gh-pages/backgroundsize.min.htc) 需要引进来，改好样式来看下效果：
可以看到，图片已经填充了整个child，并且dom结构也变化了，这是.htc文件自动创建的，IE 8+都兼容。
有兴趣深究的童鞋可以看下官方非压缩的源码，原理是创建一个 img 元素插入到容器中，并重新计算宽度、高度、left、top 等值，模拟 background-size 的效果。
backgroundsize.min.htc
作者：Mr慢悠悠
链接：https://www.jianshu.com/p/05e559784bc5
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
8426
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
