如何为 <picture> 元素中的 <img> 元素设置宽度和高度属性以防止布局偏移？

Question

在 Chrome DevTools 中运行 Lighthouse，它说 CLS（累积布局转换）需要改进。

我知道现代浏览器现在根据图像的width 和height 属性设置图像的默认纵横比。因此，最佳做法是应设置width 和height 属性以防止布局变化。

尽管如此，我还是省略了设置 width 和 height 属性，因为这是我让它按照我想要的方式工作的唯一方法（请参阅下面的代码）。

因为我有 WebP 格式的图像（带有 png 后备），我不得不使用 <picture> 元素（以便不支持 WebP 的浏览器获得图像的 png 版本）。请注意，我使用的是相同图像的不同尺寸版本。

因此，如果我没有使用 WebP 格式，我会单独使用 <img> 而不是 <picture>。多亏了纵横比，问题就会得到解决。

正如您在下面的代码 sn-p 中看到的，在这个特定示例中，同一张图片有两个版本。在<img> 中设置width="245" 和height="600" 会导致我的两个不同尺寸版本的相同图像 的最大尺寸为245 x 600px（它当然会根据具有较小的视口）。根据我的媒体查询，对于更宽的视口（最小宽度：813px），我提供相同图像的较大版本，但在<img> 中设置width 和height，图像会缩小到 245 x 600 像素。

现在回答我的问题；如果可能的话，我可以做些什么来为我的<img> 元素在我的<picture> 元素中设置width 和height 属性以防止布局变化（并且这样做还可以获得其他好处，例如更快的加载次）？因此，如何让浏览器利用纵横比以正确的方式显示我的图像？

我非常感谢有人对此提供指导。

谢谢/卡尔

<picture>
            <source 
              media="(max-width: 812px)" 
              srcset="image-245w.webp"
              type="image/webp"
            >
            <source 
              media="(min-width: 813px)" 
              srcset="image-332w.webp"
              type="image/webp"
            >
            <source 
              media="(max-width: 812px)" 
              srcset="image-245w.png"
              type="image/png"
            >
            <source 
              media="(min-width: 813px)" 
              srcset="image-332w.png"
              type="image/png"
            >
            <img class="img-fluid" src="image-245w.png" alt="image">     
</picture>

Answer 1

我做了一些测试，得出的结论是，在图像元素上使用width 和height（你应该这样做）会取消sizes 属性。如果您设置了width 和height，您将无法让您的响应式图像正常工作。

我创建了一个显示不同组合的小型仓库：https://www.gijsvandam.nl/responsive-picture-element/

解决方案是不使用sizes如果你使用width和height，而是依赖css来设置正确的宽度和高度.

<picture>
            <source 
              srcset="image-245w.webp 245w, image-332w.webp 332w"
              type="image/webp"
            >
            <img
              srcset="image-245w.png 245w, image-332w.png 332w" 
              class="img-fluid" 
              src="image-245w.png" 
              alt="image" 
              width="245" 
              height="600">     
</picture>

     @media (max-width: 812px) {
        .img-fluid {
           width: 245px;
           height: auto;
        }
      }
      @media (min-width: 813px) {
        .img-fluid {
           width: 332px;
           height: auto;
        }
      }

重要的是要了解srcSet 与sizes 组合（或与上述css 组合）并不一定会强制浏览器使用一个图像或另一个图像。根据device pixel ratio，浏览器可能会选择加载更大的图像以显示在 245 像素宽的图像槽中。您只需要相信浏览器会为工作选择最佳文件。 “大小”和srcSet 之间没有一对一的关系。这就是为什么您可以在srcSet 中提供比sizes 属性中的选项更多（或更少）的文件。

Answer 2

无论你试图做什么，它都会变得复杂，因为你试图完成它。您可以使用相同的图像并使用 CSS 调整其大小。使用媒体查询根据屏幕宽度声明不同大​​小的图像，如下所示。

/* displays the image at 245x600px for small screens */

@media only screen
  and (max-width: /*enter a width in px */) {
    .img-fluid {
      height: 245px;
      width: 600px;
    }
}

/* displays the image at 332x812px for small screens */

@media only screen
  and (min-width: /*enter a width of max-width +1px*/) {
    .img-fluid {
      height: 332px;
      width: 812px;
    }
}
      

<img class="img-fluid" src="image-245w.png" alt="image">