我們都知道，在處理相應佈局的時候，背景圖片都是等比例縮放，使用引入的話，設定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;
    }

效果如下：


自認為這種方法簡單一些~~