当直接使用img标签时，在图片初始加载的时候会有一个样式错位的过程，原因在于图片还未加载时，渲染引擎无法获得图片的宽高比例信息，当开始加载后会由图片撑起该区域。

  1. <style>
  2.   img {
  3.     background-color: #999;
  4.     width: 500px;
  5.   }
  6. </style>
  7. <img src="example.png" />

gif1.gif
由上图可以看到，当图片加载的时候，会有高度的变化，导致样式移位，对用户体验的影响很不好。我们可以通过给图片设置 aspect-ratio 的方式来解决这个问题。

aspect-ratio

  1. img {
  2.   background-color: #999;
  3.   aspect-ratio: 3/2;
  4.   width: 500px;
  5. }

新增 aspect-ratio 之后我们再来看一下效果，⚠️注意，它的值是 witdh/height
gif2.gif
这样设置之后，在页面刷新的时候会直接对图片进行占位，而不会有移位的情况。但需要注意 aspect-ratio 的浏览器兼容性。
image.png

padding-top hack

在 aspect-ratio 属性被广泛使用之前，我们通常需要使用设置 padding-top 的方法来达到类似的效果。

  1. <style>
  2. .img-wp {
  3.   position: relative;
  4.   padding-top: 66.67%;
  5.   overflow: hidden;
  6. }
  7. .img {
  8.   position: absolute;
  9.   left: 0;
  10.   top: 0;
  11.   width: 100%;
  12.   height: 100%;
  13.   background-color: #999;
  14. }
  15. </style>
  16. <div class="img-wrapper">
  17.   <img class="img" src="example.png" />
  18. </div>

⚠️：这里的 padding-top 设置的是 height/width。这样我们也可以达到设置图片比例，并且避免样式移位。

attribute height width

我们也可以使用直接在图片上添加宽高属性的方式来达到相同的效果。

  1. <img width="500" height="333" src="example.png" />

这种使用方式需要设置定高和定宽，不如前两种方式灵活。