处理页面加载图片显示前后抖动问题

html

      <div class="banner">
        <img
          class="banner__img"
         src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
      </div>

css

.banner {
  height: 0;
  overflow: hidden;
  padding-bottom: 25.4%; // 计算图片的长宽比 这里就表示图片的高
}
.banner__img {
  width: 100%;
}