延迟加载时 <picture> 元素的宽度和高度

Question

https://pastebin.com/2AY6s2tm

html

<picture>
   <!-- _1_1_2, _16x9 -->
   <source srcset="/media/img/raster/4fe4c2e2-b8f3-4c88-a06d-2f44e76f53ef/img_width_70_height_39_dpr_1x_ver_4.webp 1x" type="image/webp" media="(max-width: 359px)">
...
   <source srcset="/media/img/raster/4fe4c2e2-b8f3-4c88-a06d-2f44e76f53ef/img_width_339_height_190_dpr_1x_ver_4.jpg 1x" type="image/jpeg" media="(min-width: 1920px)">
   <img loading="lazy" width="70" height="39" src="/media/img/raster/4fe4c2e2-b8f3-4c88-a06d-2f44e76f53ef/img_width_239_height_134_dpr_1x_ver_4.jpg" alt="Trololo">
</picture>

css

img {
    width: 100%;
}

好吧，延迟加载。

图像应包括宽度和高度。 文档：https://web.dev/browser-level-image-lazy-loading/#images-should-include-dimension-attributes

如果我们不包括宽度和高度，可能会发生布局偏移。

因此，如果我们包含宽度和高度，那么聪明的浏览器会计算其比例。并为元素分配必要的空间。

请看一下图片。我规定宽度= 70，高度= 39。 这似乎是合理的。此图片的纵横比为 16:9。

高度 = 70 * 9/16 = 39.375 ~ 39。

如果我没记错的话，确切的像素在这里并不重要：移动世界中的屏幕总是不同的。

问题

我们可以清楚地看到，宽度适合父元素的宽度。但是身高还是39，没有重新计算过。

当然，这扭曲了图像的整个纵横比。

你能帮我吗。

Answer 1

我想如果您在 CSS width:100%; 中设置，您还需要显式设置 height:auto;。

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

您还可以在此处找到一些结构性建议：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture