CSS實現寬度自適應100%，寬高16:9的比例的圖片或者矩形

前言

圖片的大小是多少，寬度一定，高度要始終自自適應為16:9。

 

解決

1通過js，程序算出絕對高度再進行設置。這是解決問題最容易想到的方法。

2.我們的原則是能用css實現的功能盡量用css，這有利於后期項目的維護。

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

 

我們通過百分比設置寬度，根據寬度的比例數值*9/16，計算出高度的百分比數值，

設置內邊距為高度的數值，最后用絕對定位把圖片百分百填充到我們設置的區域里面

代碼

HTML

<div class="box">
  <div class="scale">
    <img src="http://img17.3lian.com/201612/16/88dc7fcc74be4e24f1e0bacbd8bef48d.jpg" class="item"/>
  </div>
</div>

css

.box {
  width: 80%;
}

.scale {
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  position: relative;
}

.item {
  width: 100%;
  height: 100%;
  background-color: aquamarine;
  position: absolute;
}

然後就可以了。。。。嘻嘻