responsive-design - 在图像上显式设置高度和宽度似乎会使尺寸属性无效

Question

明确设置height和width图像是 Lighthouse 和 Pagespeed 洞察力的建议。但我也想利用srcset和sizes属性来提供响应式图像。

但我只能得出结论，设置height并明确地使属性width无效。sizes

无论视口宽度如何，下面的图像都只会以 1500 像素的宽度呈现。

<picture>
  <img
    srcset="
      ./images/original_s.jpg 100w,
      ./images/original_m.jpg 200w,
      ./images/original_l.jpg 550w
    "
    sizes="(max-width: 768px) calc(100vw - 3em), (max-width: 1376px) calc(50vw - 12em), 550px"
    src="./images/original.jpg"
    alt="Responsive image"
    width="1243"
    height="1500"
  />
</picture>

我有一个解决方法，它使用 CSS 而不是sizes属性

img.styled {
  width: 550px;
  height: auto;
}
@media (max-width: 1376px) {
  img.styled {
    width: calc(50vw - 12em);
    height: auto;
  }
}
@media (max-width: 768px) {
  img.styled {
    width: calc(100vw - 3em);
    height: auto;
  }
}

<picture>
  <img
    srcset="
      ./images/original_s.jpg 100w,
      ./images/original_m.jpg 200w,
      ./images/original_l.jpg 550w
    "
    sizes="(max-width: 768px) calc(100vw -
  3em), (max-width: 1376px) calc(50vw - 12em), 550px"
    src="./images/original.jpg"
    alt="Screenclip of Stefan's Twitter"
    loading="lazy"
    decoding="async"
    width="1243"
    height="1500"
    class="styled"
  />
</picture>

我不喜欢这种变通方法。我很想看到这个与sizes属性一起工作，但我不知道这是否可能。我已经制作了一个页面，您可以在其中看到解决方法（第一张图片）和原始 html（第二张图片）以及其他一些组合：https ://www.gijsvandam.nl/responsive-picture-element/

回购在这里https://github.com/gijswijs/responsive-picture-element

我很想知道是否有办法让它在没有 CSS 的情况下工作。

标签： responsive-designresponsive-imagessrcset