需求：

最近產(chǎn)品要求不管原圖的大小是多少，寬度一定，高度要自自適應(yīng)為16:9。

?

分析：

對(duì)于正常的固定好寬度大小，這個(gè)需求很容易解決，直接通過人工計(jì)算，根據(jù)寬度的數(shù)值計(jì)算好高度的數(shù)值，然后css直接設(shè)置高度就行了。這樣當(dāng)然簡(jiǎn)單。可是現(xiàn)在在移動(dòng)開發(fā)的過程中，我們?yōu)榱俗赃m應(yīng)不同大小的屏幕，通過設(shè)置百分比來定寬，這樣css無法通過計(jì)算得出這個(gè)固定的高度。

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

css同樣可以實(shí)現(xiàn)這個(gè)問題，我們可以利用邊距的百分比屬性定義來優(yōu)雅實(shí)現(xiàn)。

我們來看W3C對(duì)應(yīng)邊距采用不同值得定義

?

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

所以CSS的實(shí)現(xiàn)方案

我們通過百分比設(shè)置寬度，根據(jù)寬度的比例數(shù)值*9/16，計(jì)算出高度的百分比數(shù)值，設(shè)置內(nèi)邊距為高度的數(shù)值，最后用絕對(duì)定位把圖片百分百填充到我們?cè)O(shè)置的區(qū)域里面

?

代碼實(shí)現(xiàn)：

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

?

實(shí)現(xiàn)效果：

轉(zhuǎn)載于:https://www.cnblogs.com/caizhenbo/p/css.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。