图片加载防抖且宽高适应父元素的一个思路

父元素高度设置为 0，使用 padding 撑起高度，利用绝对定位让图片定位在父元素的内边距上

1
2
3
<div class="image-box">
  <img src="picture/url" />
</div>
1
2
3
4
5
6
7
8
9
10
11
.image-box {
  width: 100px;
  height: 0;
  position: relative;
}
.image-box img {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
}