background-size: 可以设定背景图像的尺寸，该属性是css3中的，在移动端使用的地方很多，比如最常见的地方在做响应性布局的时候，比如之前做的项目中有轮播图片，为了自适应不同大小分辨率的图片，我门需要使用css3中的媒体查询来针对不同的分辨率设置宽度和高度，虽然这种方式是可以解决问题，但是解决方式并不是太好，并且很繁琐，当然我门也想过直接使用百分比设置图片的大小，比如width(宽度): 100%，height(高度)：100%; 但是设置图片等高度100%的时候并不生效，图片没有显示出来，因为没有设置具体的高度值，浏览器渲染的时候并没有高度，因此当时解决的方法是使用css3中的媒体查询真对不同的分辨率等比例缩放不同的height(高度)；今天我门重新来学习下background-size 这个具体的属性值，并且使用新的方法来解决针对响应性布局的背景图片自适应。
浏览器支持的程度：IE9+, Firefox4+, opera, chrome, safari5+;
基本语法：background-size: length | percentage | cover | contain;
一：length
该属性值是设置背景图像的宽度和高度的，第一个值是宽度，第二个值是设置高度的。如果只设置第一个值，那么第二个值会自动转换为 “auto”;
二：percentage
该属性是以父元素的百分比来设置图片的宽度和高度的，第一个值是宽度，第二个值是高度。如果只设置一个值，那么第二个值会被设置为 “auto”;
三：cover
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
四：contain
把图像扩展至最大尺寸，以使宽度和高度 完全适应内容区域。
给图片设置固定的宽度和高度的
下面我门来做一些demo来实现下上面的几个属性值的基本使用方法；
基本的原图的html代码如下：
|
1 2 |
<h3>原图</h3> <div class="images"><img src="http://images2015.cnblogs.com/blog/561794/201603/561794-20160310002800647-50077395.jpg" width="100%"/></div> |
效果如下图所示：
给图片设置固定的宽度和高度的代码如下：
比如设置 固定宽度400px和高度200px后的图片；
HTML代码如下：
|
1 2 |
<h3>固定宽度400px和高度200px后的图片</h3> <div class="bsize1"></div> |
css代码如下：
|
1 2 3 4 5 6 7 |
.bsize1 { width:400px; height:200px; background: url("http://images2015.cnblogs.com/blog/561794/201603/561794-20160310002800647-50077395.jpg") no-repeat; border:1px solid red; overflow: hidden; } |
效果如下：
固定宽度400px和高度200px－使用background－size:400px 200px缩放设置
2. 固定宽度400px和高度200px－使用background－size:400px 200px缩放设置；
HTML代码如下：
|
1 2 |
<h3>固定宽度400px和高度200px－使用background－size:400px 200px缩放设置<h3> <div class="bsize1 bsize2"><div> |
css代码如下：
|
1 2 3 |
.bsize2 { background-size: 400px 200px; } |
效果如下：
固定宽度400px和高度200px－使用background-size:400px;的缩放设置
3. 固定宽度400px和高度200px－使用background-size:400px;的缩放设置，那么第二个参数会自动转换为auto；
HTML代码如下：
|
1 2 |
<h3>固定宽度400px和高度200px－使用background-size:400px;的缩放设置<h3> <div class="bsize1 bsize3"><div> |
css代码如下：
|
1 2 3 |
.bsize3 { background-size: 400px; } |
效果如下：
固定宽度400px和高度200px－使用background-size:100% 100%的缩放设置
4. 固定宽度400px和高度200px－使用background-size:100% 100%的缩放设置
HTML代码如下：
|
1 2 |
<h3>固定宽度400px和高度200px－使用background-size:100% 100%的缩放设置<h3> <div class="bsize1 bsize4"><div> |
css代码如下：
