<img>標(biāo)簽可以使圖片在保持寬高比不變的情況下自動(dòng)調(diào)整。我們討論的是div的背景圖片實(shí)現(xiàn)固定寬高比自適應(yīng)調(diào)整的方法。這里的圖片不是< img>標(biāo)簽一樣通過src引入，而是通過css的background-image: url('路徑')實(shí)現(xiàn)。

實(shí)現(xiàn)背景圖片固定寬高比縮放我們采用padding-top:(percentage)來實(shí)現(xiàn)，padding-top取值百分比是相對(duì)于包含塊的寬度而定。
因?yàn)閳D片尺寸和屏幕尺寸不匹配等原因，可能會(huì)出現(xiàn)背景圖片顯示不完全等情況，我們先用一個(gè)小的div來演示一下。

代碼如下，限制一個(gè)div的最大寬度為750px，根據(jù)圖片尺寸設(shè)定padding-top: 89%，這個(gè)百分比是高度/寬度。

無縮放時(shí)如下圖

有縮放時(shí)的如下 

我們可以看出，在瀏覽器窗口尺寸改變時(shí)，圖片的寬高比沒有改變。

下面我們用網(wǎng)頁的背景圖片試試。代碼，

注意代碼中的background-size屬性，我們給的屬性值是cover，是把背景圖片放大到適合元素容器的尺寸，圖片比例不變，會(huì)出現(xiàn)圖片顯示不全的情況。還有一個(gè)經(jīng)常使用的值是background-size：100% 100% ，圖片按容器比例撐滿，會(huì)導(dǎo)致圖片變形。

我們運(yùn)行后得到的結(jié)果及縮放后的結(jié)果如下所示，雖然圖片顯示不完全，但是可以看到寬高比是不變的。

padding-top 可以用于背景圖片固定寬高比縮放的原因，是背景圖片區(qū)域包含padding，所以padding不會(huì)影響背景圖片，如果還要在背景圖片上加一些文字等，可能padding-top的方法就不適用了。

在這里提一下另一種方法，我們可以在屏幕變化時(shí)，根據(jù)屏幕寬度顯示不同的背景圖片，用css @media實(shí)現(xiàn)，

具體用法可參考：http://m.fzitv.net/css/692648.html

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論