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

    <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