需求：

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

?

分析：

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

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

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

我們來看W3C對應邊距采用不同值得定義

?

也就是說如果我們的邊距值設置為百分比的話，是基于父元素的寬度

所以CSS的實現方案

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

?

代碼實現：

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

?

實現效果：

轉載于:https://www.cnblogs.com/caizhenbo/p/css.html

總結

以上是生活随笔為你收集整理的css实现16:9的图片比例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。