在响应式或者需要计算滚动条位置等开发中，可能因为网络原因，图片加载慢、加载失败会出现不可预料问题。此时就有CSS实现在图片未加载的情况下实现占位，保持图片占位区的宽高比，并如真实图片可以大小自适应的需求。
观点
能用 CSS 解决的就坚决不用 JS。
解决思路
有个设计网站：Dribbble，我发现首页列表图片未加载的情况下，有个空白占位，而且图片加载完成后，刚好填充该空白，且页面未抖动。
扒源码分析：
在 CSS 中，padding 的百分比是相对于元素自身的75%，就是 75 / 100 = 600 / 800，padding-bottom / 100 = height / width
假设，图片尺寸 800 x 600
那么，padding-bottom = 600 / 800 * 100 = 75
所以设置 padding-bottom: 75% 就能保持宽高比。
公式(百分比)：
padding-bottom = H / W * 100
实现方案
利用before或者after伪类作为占位符，图片绝对定位。
<!-- html结构 -->
<div class="img-placeholder">
<img src="..." />
</div>
<!-- css代码 -->
<style>
.img-placeholder{
position: relative;
overflow: hidden;
}
.img-placeholder:before{
content:"";
display:block;
padding-bottom:75%; // H / W * 100;
}
.img-placeholder>img{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
</style>