CSS實現16:9等比例盒子

　　問題：圖片的寬度100%，高度要始終自適應爲16:9。

　　解決方案：

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

　　二、可是，咱們的原則是能用css實現的功能儘可能用css，這有利於後期項目的維護。css一樣能夠實現這個問題，咱們能夠利用邊距的百分比屬性定義來優雅實現。

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

　　那麼外面盒子寬度100%，高度0，可是由於有padding-bottom爲9/16的比例，因此外層盒子始終是16:9等比例，再絕對定位設置圖片寬高都100%便可。

<div class="scale">
    <img src="" class="item"/>
</div>

　　css代碼：

.scale { width: 100%; padding-bottom: 56.25%; height: 0; position: relative; } .item { width: 100%; height: 100%; background-color: aquamarine; position: absolute; }

　　這樣便可，比較簡單，就是思惟上的靈活運用。