使用padding-top方式实现响应式背景图片

我们都知道，在处理相应布局的时候，背景图片都是等比例缩放，使用引入的话，设置width:100%;height:100%;那么图片就会等比例缩放，这是图片，那么如果是背景图呢？我们之前的项目中常见的做法是根据css3媒体查询的方法来做的，根据不同手机的分辨率的不同，来等比例缩放背景图的高度，虽然这种方式是可以解决的，但是这种通过人肉的的方式来进行的设置并不好，也很繁琐，今天我们来学习使用padding-top这么一个属性来设置；

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

padding-top = (高度/宽度)*100%=（474/355.5）*100%=75%

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

<h3>使用padding-top实现响应性图片(图片的宽度是474px,高度是宽度的75%)</h3>
 <div class="column">
       <div class="figure"></div>
  </div>

css代码如下：

  .column{
        max-width: 474px;
 }
 .figure {
         padding-top:75%; 
         background:url("http://img3.duitang.com/uploads/item/201604/13/20160413131244_yxuwU.jpeg") no-repeat;
         background-size:cover;
         background-position:center;
    }

效果如下：


自认为这种方法简单一些~~