【CSS】当图片加载缓慢时,图片如何自适应高度
1、问题:
图片在加载成功前,包裹图片的div没有被撑开,导致整体布局难看,产生页面“闪烁”的现象。
2、解决:
设置容器的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>