加载缩略图时防止页面的视觉重排

Question

我每页加载多个缩略图，介于50或100之间。即使没有必要，我也希望为<img>元素提供某种高度和宽度，这样就不会导致视觉效果图像加载后页面重排。

我不知道每张图片的确切宽度或高度。我只知道，图像宽度和高度永远不会超过125像素。 所以，我可以有125x125,100x80,45x90等图像......但宽度或高度从不超过125.

是否有一种技术可以阻止页面的视觉回流，知道我刚才提到的内容？

由于

Answer 1

如果我理解正确，你应该将元素包装在（或块类型元素）中，并在新div上设置min-width和min-height。如果您希望它只占用所需的最小空间，请使用45和90作为最小值。如果你想占用总空间，可以使用125作为最小值。像这样：

<div class="img-holder>
  <img src="path/to/image" />
</div>

在你的CSS中：

.img-holder {
  min-width: 45px;
  min-height: 90px;
 }