【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>