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

 

转载于:https://www.cnblogs.com/cindy2035/p/10436879.html