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

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

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

無縮放時如下圖

有縮放時的如下 

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

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

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

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

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

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

具體用法可參考：http://www.dbjr.com.cn/css/692648.html

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對腳本之家的支持。

最新評論