HTML：延迟加载时不考虑图像属性宽度/高度

Question

我有一个页面，里面有一堆<img>（很像任何博客文章页面）：

• 它们都将属性 width 和 height 设置为正确的值
• 它们都有 loading="lazy" 标签集

他们也有遵守纵横比的 CSS 规则，例如：

img {
  max-width: 100%;
  width: auto;
  height: auto;
}

小提琴示例：https://jsfiddle.net/Jorge2910/stbedr1f/

我的问题是，折叠下方尚未加载的图像的高度为 0，并在您向下滚动页面并加载图像时产生布局偏移。如何在仍然延迟加载图像的同时避免这种情况？

我的想法是，通过设置 HTML 属性，图像元素将默认具有这些尺寸，但它似乎不适用于延迟加载和设置的 CSS 规则。