CSS實現16:9等比例盒子

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

　　解決方案：

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

　　2、但是，我們的原則是能用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; }

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