页面防抖动

在显示图片时加载过慢，如果设置了宽度，但是高度让图片自动撑开的话，就会让页面发生抖动现象，如果不想出现抖动，需要给图片的外层容器加个背景颜色并且希望外层容器在图片未加载出来时，容器的宽高比例就等于图片的宽高比例，就需要借助padding-bottom或者padding-top,然后外层容器需要设置position:relative，图片设置position:absolute，这样就行了

以下是两种解决方案：

.wrapper {
position: relative;
width: 40%;  //其实百分之多少看你自己想要多少，只要设置的padding-bottom和width的宽高比和图片一样就行
height: 0;  //加不加都行其实，看情况
padding-bottom: 20%;  //这里展示的宽高比是一比二
background-color: #999;
}

img {
position: absolute;
width: 100%;  //其实不写也可以
}

另外一种方法可以实现图片下面直接写描述内容

.wrapper {
      position: relative;
      width: 40%;
      height: 20px;
      padding-top: 20%;
      overflow: hidden;
      background-color: #999;
    }
    
img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      /* height: 100%; */
    }