css實現16:9的圖片比例

需求：

最近產品要求不管原圖的大小是多少，寬度一定，高度要自自適應為16:9。

 

分析：

對於正常的固定好寬度大小，這個需求很容易解決，直接通過人工計算，根據寬度的數值計算好高度的數值，然后css直接設置高度就行了。這樣當然簡單。可是現在在移動開發的過程中，我們為了自適應不同大小的屏幕，通過設置百分比來定寬，這樣css無法通過計算得出這個固定的高度。

當然解決這個方式可以通過js，程序算出絕對高度再進行設置。這是解決問題最容易想到的方法。但是這使我們這個功能的實現需要js的介入，大材小用，我們的原則是能用css實現的功能盡量用css，這有利於后期項目的維護。

css同樣可以實現這個問題，我們可以利用邊距的百分比屬性定義來優雅實現。

我們來看W3C對應邊距采用不同值得定義

 

也就是說如果我們的邊距值設置為百分比的話，是基於父元素的寬度

所以CSS的實現方案

我們通過百分比設置寬度，根據寬度的比例數值*9/16，計算出高度的百分比數值，設置內邊距為高度的數值，最后用絕對定位把圖片百分百填充到我們設置的區域里面

 

代碼實現：

 <div class="img_wap">
    <img src=""/>
  </div>

.img_wap{
    padding-bottom: 56%;
    width: 100%;
    position: relative;
  }

  .img_wap img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;  
  }

 

實現效果：