在web开发中，经常会遇到这样一个问题，比如一个宽度百分百，高度自适应的图片，在网速慢的情况下加载过程中会出现抖动的问题（未加载图片前容器的高度为0，图片加载完成后下面的内容会被挤下去）。
这种问题如果是图片有固定高度，就不会出现加载抖动。但一般情况下，为了使图片不被拉伸，高度一般设为自适应，那么为了防止加载抖动，我们需要给图片提前占个位，这里使用的是css的padding-bottom百分比进行占位。
示例代码如下
.img-box{ overflow: hidden; width: 100%; height: 0; padding-bottom: 50%;}这里的50%是图片的高宽比例，切记是相对于父元素宽度的50%（即.img-box的上一级），不是相对于自己的width，详情请看下面的例子。
这里写了一个小案例
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>padding-bottom</title> <style> .content{ width: 400px; height: 400px; margin: 100px auto; background-color: aquamarine; } .box1{ width: 100%; /* 400px 相对于content的width */ height: 0; padding-bottom: 50%; /* 200px 相对于content的width */ background-color: red; } .box2{ width: 25%; /* 100px 相对于box1的width */ height: 0; padding-bottom: 25%; /* 100px 相对于box1的width */ background-color: yellow; } </style></head><body> <div class="content"> <div class="box1"> <div class="box2"></div> </div> </div></body></html>如图所示
这种情况下box2中如果有图片宽高比为一比一时（根据padding的百分比），加载过程中就不会出现抖动的情况，同理box1也是如此。
当然解决抖动还有其他方法，比如何以用vw（兼容性不太好，这里就不列举了），还有比如在微信小程序中rpx，如果图片的设计大小宽高为750×300时，就可以直接写成height: 300rpx。
