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

圖片因為本身存在寬高比，所以設(shè)置一個值，另一個值自動也就根據(jù)真實的比例對應(yīng)上

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

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

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

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

實例：

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。