CSS3中的background－size(对响应性图片等比例缩放)

background-size的基本属性

background-size: 可以设定背景图像的尺寸，该属性是css3中的，在移动端使用的地方很多，比如最常见的地方在做响应性布局的时候，比如之前做的项目中有轮播图片，为了自适应不同大小分辨率的图片，我门需要使用css3中的媒体查询来针对不同的分辨率设置宽度和高度，虽然这种方式是可以解决问题，但是解决方式并不是太好，并且很繁琐，当然我门也想过直接使用百分比设置图片的大小，比如width(宽度): 100%，height(高度)：100%; 但是设置图片等高度100%的时候并不生效，图片没有显示出来，因为没有设置具体的高度值，浏览器渲染的时候并没有高度，因此当时解决的方法是使用css3中的媒体查询真对不同的分辨率等比例缩放不同的height(高度)。

浏览器支持的程度：IE9+, Firefox4+, opera, chrome, safari5+;

基本语法：background-size: length | percentage | cover | contain;

一：length

该属性值是设置背景图像的宽度和高度的，第一个值是宽度，第二个值是设置高度的。如果只设置第一个值，那么第二个值会自动转换为 “auto”;

二：percentage

该属性是以父元素的百分比来设置图片的宽度和高度的，第一个值是宽度，第二个值是高度。如果只设置一个值，那么第二个值会被设置为 “auto”;

三：cover

把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

四：contain

把图像扩展至最大尺寸，以使宽度和高度完全适应内容区域。

设置固定宽度400px和高度200px后的图片

<span style="color: #008080;">1</span> <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="bsize1"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>

登入後複製

<span style="color: #008080;">1</span> <span style="color: #800000;">.bsize1 </span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">     width</span>:<span style="color: #0000ff;">400px</span>;
<span style="color: #008080;">3</span> <span style="color: #ff0000;">     height</span>:<span style="color: #0000ff;">200px</span>;
<span style="color: #008080;">4</span> <span style="color: #ff0000;">     background</span>:<span style="color: #0000ff;"> url("1.jpg") no-repeat</span>;
<span style="color: #008080;">5</span> <span style="color: #ff0000;">     border</span>:<span style="color: #0000ff;">1px solid red</span>;
<span style="color: #008080;">6</span> <span style="color: #ff0000;">     overflow</span>:<span style="color: #0000ff;"> hidden</span>;
<span style="color: #008080;">7</span>   }

登入後複製

固定宽度400px和高度200px－使用background－size:400px 200px缩放设置或者使用background-size:100% 100%缩放设置

<span style="color: #008080;">1</span> <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="bsize1 bsize3"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>

登入後複製

<span style="color: #008080;">1</span> <span style="color: #800000;">.bsize3 </span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">         background-size</span>:<span style="color: #0000ff;"> 400px</span>;
<span style="color: #008080;">3</span>         <span style="color: #008000;">/*</span><span style="color: #008000;">background-size:100% 100%;</span><span style="color: #008000;">*/</span>
<span style="color: #008080;">4</span>  }

登入後複製

固定宽度400px和高度200px－使用background-size:100%的缩放设置

<span style="color: #008080;">1</span> <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="bsize1 bsize5"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>

登入後複製

<span style="color: #008080;">1</span> <span style="color: #800000;">.bsize5 </span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">         background-size</span>:<span style="color: #0000ff;"> 100%</span>;
<span style="color: #008080;">3</span>   }

登入後複製

使用属性cover来设置背景图片

<span style="color: #008080;">1</span> <span style="color: #800000;"><div class="bsize1 cover"></div></span>

登入後複製

<span style="color: #800000;">.cover </span>{<span style="color: #ff0000;">
        background-size</span>:<span style="color: #0000ff;">cover</span>;
 }

登入後複製

使用属性contain来设置背景图片

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="bsize1 contain"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>

登入後複製

<span style="color: #800000;">.contain </span>{<span style="color: #ff0000;">
        background-size</span>:<span style="color: #0000ff;">contain</span>;
  }

登入後複製

给图片设置width属性100%；高度自适应

不使用背景图片等情况下，给图片设置属性 width ＝ 100%，它的高度会自适应的。如下HTML代码：

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="bsize-padding"</span><span style="color: #0000ff;">><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="3.jpg"</span><span style="color: #ff0000;"> width</span><span style="color: #0000ff;">="100%"</span><span style="color: #0000ff;">/></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span>

登入後複製

使用另一种方式来解决图片自适应的问题－－图片自适应问题

图片宽度设置100%，页面加载时会存在高度塌陷的问题，可以使用padding－top来设置百分比值来实现自适应 padding-top = (图片的高度/图片的宽度)*100；

<span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>可以使用padding－top来设置百分比值来实现自适应 padding-top = (图片的高度/图片的宽度)*100<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="cover-paddingTop"</span><span style="color: #0000ff;">></span>
      <span style="color: #0000ff;"><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="5.jpg"</span><span style="color: #0000ff;">/></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span>

登入後複製

<span style="color: #800000;">.cover-paddingTop </span>{<span style="color: #ff0000;">
       position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
       padding-top</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;"> 
       overflow</span>:<span style="color: #0000ff;"> hidden</span>;
  }<span style="color: #800000;">
 .cover-paddingTop img</span>{<span style="color: #ff0000;">
      width</span>:<span style="color: #0000ff;">100%</span>;<span style="color: #ff0000;">
      position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
      top</span>:<span style="color: #0000ff;">0</span>;
  }

登入後複製

使用padding-top:(percentage)实现响应式背景图片

实现的基本原理：将使用到保持元素的宽高比的技巧，为元素添加垂直方向的padding-top的值，使用百分比的形式，这个值是相对于元素的宽而定的，比如我上面的一张图片的宽度是1024px，高度为316px；那么现在的

padding-top = （高度 / 宽度）*100% ＝（316 ／ 1024）* 100% ＝ 30.85%;

但是仅仅对图片高度和宽度缩放的放还不够，我门还必须添加 background-size:cover, 使这个属性让背景铺满元素的，但是IE8及以下不支持该属性，因此为了兼容IE下面的浏览器，我门还需要再加一个属性 background-position: center ; 同时我门也要保证图片的宽度最大等于父容器的宽度；因此下面的HTML代码如下：

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="column"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="figure"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span>

登入後複製

<span style="color: #800000;">.column</span>{<span style="color: #ff0000;">
        max-width</span>:<span style="color: #0000ff;"> 1024px</span>;
 }<span style="color: #800000;">
 .figure </span>{<span style="color: #ff0000;">
         padding-top</span>:<span style="color: #0000ff;">30.85%</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 316 / 1024 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
         background</span>:<span style="color: #0000ff;"> url("6.jpg") no-repeat</span>;<span style="color: #ff0000;">
          background-size</span>:<span style="color: #0000ff;">cover</span>;<span style="color: #ff0000;">
          background-position</span>:<span style="color: #0000ff;">center</span>;
    }

登入後複製