CSS3 Background-size 详解

CSS3 Background-size 详解

前段时间在做关于响应式的页面时，由于要兼容ie8，并且要保证图片等比缩放，且对图中内容的显示有要求，导致无法使用background-size等属性，最终放弃了使用background，用<img>来替代。这样增加了代码量而且看起来很不clean。

但是很多情况下用background还是可以达到目的的，并且有解决方案（后面会提到）。下面我就详细讲下background-size。

background-size

background-size: auto || <length> || <percentage> || cover || contain

取值说明：

• auto: 此值为默认值，保持背景图片的原始高度和宽度
• length: 此值为具体的值，可能会造成与图片原始宽高比不一致
• percentage: 此值为百分比，且只能用在block，inline-block元素上。注意是相对所在容器的百分比。
• cover: 此值是将图片放大(当然了，如果图片本身大于容器，图片会等比缩放到合适宽高的)以适应容器大小，这个属性也是应用最多的。
• contain: 此值是将图片缩小以在容器中显示完整图片。当容器的宽高比例与图片不一致时，可能会出先上下或左右留出空隙。

---

举个例子

1. auto | length | percentage

background-size: auto auto; // 默认值，即保持图片原始的宽和高
background-size: auto; // 和上面的效果一样，省略的值为auto

background-size: 100px 50px; // 图片变为宽100px, 高50px
background-size: 100px; // 图片宽为100px, 高度auto，即高度自适应

background-size: 100% 80%; // 宽度为容器宽的100%，高度为容器高度的80%
background-size: 100%; // 宽度为容器宽度的100%，高度auto自适应
 
 
1
2
3
4
5
6
7
8
 
 
1
2
3
4
5
6
7
8

2. cover

cover属性会对图片进行剪裁，当图片大小超过容器大小时。所以一般也会配合background-position来决定显示图片内容的位置。

background-size: cover;
 
 
1
 
 
1

效果： 

background-size: cover;
background-position: center;
 
 
1
2
 
 
1
2

效果： 

3. contain

contain属性将图片缩小至以在容器中显示完整图片，但大多数情况下，由于容器宽高比例与图片比例不同，造成图片与容器上下或左右留边的情况。

background-size: contain;
background-position: center;
 
 
1
2
 
 
1
2

效果： 

---

兼容性

虽然ie9+才支持background-size属性，但大家的智慧是无穷尽的，网上大家提供了几种解决方案，ie8及以下可以使用ie filters来模拟cover属性(据说某些情况下会有问题，本人测试过和cover效果还是有区别的):

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";
 
 
1
 
 
1

还有一种方式需引入一个jQuery插件: jquery.backgroundSize.js 
大概原理就是当浏览器不支持该属性时，用<img>标签替换