<img> 尺寸属性在加载时不起作用

Question

我使用 HTMLImageElement.sizes 来定义图像的宽度。

\n

https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes

\n

\r\n

\r\n

img {\n  background: orange;\n  border: 2px solid black;\n  aspect-ratio: 1/1;\n  object-fit: contain;\n}

\r\n

<img srcset="https://www.dofactory.com/img/html/vangogh-sm.jpg 120w,\n            https://www.dofactory.com/img/html/vangogh.jpg 193w,\n             https://www.dofactory.com/img/html/vangogh-lg.jpg 278w"\n     sizes="(max-width: 710px) 120px,\n            (max-width: 991px) 193px,\n            278px">

\r\n

\r\n

\r\n

\n

尽管尺寸根据视口宽度正确设置，但图像尺寸仅在图像完全加载后才起作用。

\n

您可以在此视频中看到加载期间图像仅为 0x0px：

\n\n

我正在寻找一种干燥的方法，\xe2\x80\x99 不需要在 html 和 css 中定义和维护一次大小，因为这很难保持同步。sizes出于性能原因，该属性也是必需的： Why can\xe2\x80\x99t we just do this using css or javascript

\n

有没有什么技巧可以在下载图像之前使用已经存在的尺寸？

\n

Answer 1

为了解决这个问题，你需要：

1. 使用@media添加 css 断点。
2. 设置初始高度。
3. 将长宽比设置为原始图像。

纵横比仅在具有宽度或高度时才起作用（在本例中），没有这两个属性，纵横比不起作用。

img {
  --initial-height: 360px;
  height: var(--initial-height);
  background: orange;
  border: 2px solid black;
  aspect-ratio: 278/360; /* original image size - width / height */
  object-fit: contain;
}

@media screen and (max-width: 991px) {
  img {
    --initial-height: 193px;
  }
}

@media screen and (max-width: 710px) {
  img {
    --initial-height: 120px;
  }
}

<img srcset="
        https://www.dofactory.com/img/html/vangogh-sm.jpg 120w,
        https://www.dofactory.com/img/html/vangogh.jpg    193w,
        https://www.dofactory.com/img/html/vangogh-lg.jpg 278w
      " sizes="(max-width: 710px) 120px,
            (max-width: 991px) 193px,
            278px" />