CSS實現背景圖片固定寬高比自適應調整

feiyu_may發表於2018-08-20

    <img>標籤可以使圖片在保持寬高比不變的情況下自動調整。我們討論的是div的背景圖片實現固定寬高比自適應調整的方法。這裡的圖片不是< img>標籤一樣通過src引入,而是通過css的background-image: url('路徑')實現。
    實現背景圖片固定寬高比縮放我們採用padding-top:(percentage)來實現,padding-top取值百分比是相對於包含塊的寬度而定。
因為圖片尺寸和螢幕尺寸不匹配等原因,可能會出現背景圖片顯示不完全等情況,我們先用一個小的div來演示一下。
    程式碼如下,限制一個div的最大寬度為750px,根據圖片尺寸設定padding-top: 89%,這個百分比是高度/寬度。
 


    無縮放時如下圖


    有縮放時的如下
 


    我們可以看出,在瀏覽器視窗尺寸改變時,圖片的寬高比沒有改變。
    下面我們用網頁的背景圖片試試。程式碼,

 
    注意程式碼中的background-size屬性,我們給的屬性值是cover,是把背景圖片放大到適合元素容器的尺寸,圖片比例不變,會出現圖片顯示不全的情況。還有一個經常使用的值是background-size:100% 100%,圖片按容器比例撐滿,會導致圖片變形。
我們執行後得到的結果及縮放後的結果如下所示,雖然圖片顯示不完全,但是可以看到寬高比是不變的。


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

    在這裡提一下另一種方法,我們可以在螢幕變化時,根據螢幕寬度顯示不同的背景圖片,用css @media實現,

 
    具體用法可參考: https://www.jianshu.com/p/b8f375b52a61
 

相關文章