css實現固定的圖片比例

css 實現 16:9 的圖片比例

需求：

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

分析：

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

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

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

重點：邊距值設定為百分比的話，是基於父元素的寬度

方案：

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

<div class="img_wrap">
  <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;
}