“ srcset”和“ sizes”属性之间是什么关系？

问题描述

假设我在下面使用此<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，还是相反？

解决方法

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项与不同布局一样多。