"srcset" 和 "sizes" 属性之间有什么关系？

Question

假设我在下面使用这个 <img> 元素（代码取自 MDN）：

<img srcset="elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 600px) 480px,
            800px"
     src="elva-fairy-800w.jpg"
     alt="Elva dressed as a fairy">

如您所见，srcset属性中有两个选项，sizes属性中有两个选项。但那些可以不同吗？可以像 srcset 的 2 和 sizes 的 3 或相反吗？

Answer 1

srcset 列出了可用的图像文件，而 sizes 定义了图像在不同断点处的渲染尺寸，因此您可以在每个断点中拥有非常不同数量的项目。

例如，您可以有更多可用图像（这里我们为密度至少为 2dppx 的大屏幕添加一张）：

<img srcset="elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w,
             elva-fairy-1600w.jpg 1600w"
     sizes="(max-width: 600px) 480px,
            800px"
     src="elva-fairy-800w.jpg"
     alt="Elva dressed as a fairy">

sizes 取决于页面在视口宽度上的各种布局，因此您经常拥有与不同布局一样多的 sizes 项。