最近在拿移動端項目練手的時候發(fā)現(xiàn)這樣一個問題:
在瀏覽器把圖片加載出來以前仇穗，圖片的高度是零屯曹，沒辦法把容器撐開摹蘑，容器在圖片加載前后都會有一個變型的過程，也就是俗稱的“閃爍”瞧栗，而如果圖片加載不出來斯稳，整體布局就更是難看了。
此時我們需要不靠圖片本身就能把容器的高度撐開方可解決問題迹恐。
在移動端挣惰，由于各機(jī)型分辨率相差太大，對圖片是不能寫死px值的殴边，還是需要用百分比來實現(xiàn)自適應(yīng)憎茂，因為容器寬高的參照物不一樣，所以相對與寬來說锤岸，高用百分比實現(xiàn)起來相對繁瑣竖幔，這時就要用到一個很important的css知識點：
當(dāng)margin/padding取形式為百分比的值時，無論是left/right是偷，還是top/bottom拳氢，都是以父元素的width為參照物的！
另外在計算overflow時蛋铆，是將元素的內(nèi)容區(qū)域（即??width??/??height??對應(yīng)的區(qū)域）和 padding 區(qū)域一起計算的馋评。換句話說，即使將元素的??overflow??設(shè)置為??hidden?刺啦，“溢出”到 padding 區(qū)域的內(nèi)容也會照常顯示留特。
我們就要利用這一基礎(chǔ)實現(xiàn)寬高成比例展示。
假設(shè)高是寬的30%玛瘸，相應(yīng)代碼如下：
overflow: hidden;? ? width: 100%;? ? height: 0;? ? padding-bottom: 30%;
當(dāng)然蜕青，用width: 100%;? ? height: 30vw;亦可實現(xiàn)，但兼容性不太好糊渊，所以還是采用上述方法
注：vw : 1vw 等于視口寬度的1%右核，vh : 1vh 等于視口高度的1%
