css技巧：防止页面加载图片时发生“抖动”

一、问题场景

假设我们在一个页面中需要异步加载图片，图片尺寸不是固定的，而是自适应屏幕宽度的正方形。

由于屏幕尺寸未知，这时我们就不能设置固定的图片尺寸。如果不做处理，页面就会在加载图片的过程中发生“抖动”

二、解决方法

1. 先明确一个知识点：

在css中，以 % 为单位的 margin 和 padding 值的计算，是相对于其父元素的width 而非 height。

2. 下面上代码（部分为vue语法）：

<!-- HTML -->

<div class="img-wrapper">
  <img :src="food.image">
</div>

/* CSS */

.img-wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 100%; 
}

img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

在上述css代码中，通过设置padding-top为100%，就实现了一个宽高相等的容器（img-wrapper）。效果图如下：

image.png