【CSS】當圖片加載緩慢時，圖片如何自適應高度

一、問題：

圖片在加載成功前，包裹圖片的div沒有被撐開，致使總體佈局難看，產生頁面「閃爍」的現象。

二、解決：

設置容器的padding-top / padding-bottom爲百分比 ，

當margin/padding取形式爲百分比的值時，都是以父元素的width爲參照。

#container { width: 50%; //父元素寬度的一半 background-color: red; //僅爲了方便演示 } .placeholder { padding-top: 50%; //與width: 50%;的值保持一致，也就是至關於父元素寬度的一半。 } <div id="container" class="placeholder"></div>