1.對于圖片，默認只設置圖片的一個寬或高，那么另一個值就會按照圖片真實比例縮放

圖片因為本身存在寬高比，所以設置一個值，另一個值自動也就根據真實的比例對應上

2.但跟pc的不一樣，移動端的圖片很多都不是固定的寬高的（icon圖標與頭像等一些小圖還是固定大小的），所以就面臨一個問題：不能設置一個具體的高度，于是就會出現加載過程其他內容隨著圖片的加載慢慢向下移動

我們怎么確定容器的高度，從而消除慢慢向下加載的影響呢？

首先必須設置height為0，按照瀏覽器從上而下、從外到內的渲染機制，首先父容器的高度為0，而父容器的寬度就是圖片的寬度，再根據百分比padding-top等比例設置父容器的高度，最后再渲染子元素圖片讓其百分百充滿父容器。這樣就會保證在圖片寬度任意變化的情況下，高度仍然是等比例的，所以不僅保證了外層容器的寬高比還撐開了容器，最后使用圖片絕對定位設置寬高100%即可實現按照比例縮放

放在移動端，假設先設置外層容器寬度為50%，隨著用戶縮放屏幕容器寬度改變，則外層容器的高度按照比例縮小，這樣就能保證容器的自適應顯示

實例：

總結

以上是生活随笔為你收集整理的CSS之容器按比例缩放的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。