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;
}