HTML srcset规范:澄清

Question

我已经编写了一个JavaScript填充程序来实现srcset，但是我需要澄清指定的行为。

虽然srcset允许您指定宽度或分辨率的条件，但我无法确定是否可以同时指定两者。例如：

<img src="images/oh1x408.jpg"
    srcset="images/oh1x192.jpg, images/oh1x408.jpg 420w,
    images/oh2x192.jpg 2x, images/oh2x408.jpg 2x 420w">

这应该包括单分辨率和双分辨率，以及更小和更宽的屏幕。

我没有见过指定宽度和分辨率的例子。问题是：

• 上面的srcset示例中的最后一个图像是否在规范中？
• 这个例子中还有什么不正确吗？

谢谢

Answer 1

不，你只能同时指定其中一个。看起来，您不了解宽度描述符是如何工作的。一旦使用了宽度描述符，就不再需要x描述符了。

下面是一个例子：

<img srcset="img-300.jpg 1x, img-600.jpg 2x" />

上面的示例也可以用宽度描述符来描述，如下所示：

<img srcset="img-300.jpg 300w, img-600.jpg 600w" sizes="300px" />

srcset是关于分辨率切换(没有艺术方向)。密度描述符只能处理静态宽度图像，而宽度描述符也可以使用sizes属性处理自适应图像。宽度描述符以物理像素为单位描述每个图像候选对象的宽度，尺寸属性以布局像素描述图像的(不同)宽度。

下面是一个更复杂的例子：

<img srcset="img-300.jpg 300w, img-480.jpg 480w, img-720.jpg 720w" sizes="(min-width: 480px) 400px, 100vw" />

上面的例子说，我们有3个候选对象--一个宽度为300，另一个为480，最后一个为720像素，此外，如果视图端口为min宽度:480 it，则图像显示为400像素，否则它将显示在完整的视口宽度(100 It)上。

然后浏览器根据您的大小属性自动计算宽度。例如，如果您使用360 to宽的设备，则大小为100 to(因为它较低480 to)，并计算为360 to布局像素。然后浏览器按除法计算每个候选人的密度:宽度描述符/计算大小)：

300 / 360 = 0.83
480 / 360 = 1.34
720 / 360 = 2

然后，浏览器根据设备的像素比选择最佳候选设备。因此，它在1x设备上获取480宽图像，在2x设备上获取720宽图像。

正如您所看到的，您不再需要使用密度描述符了。密度描述符只是一个较短的版本。

是的，已经有一个多填区处理得很好。

Answer 2

不，两者都是不允许的。srcset规范表示该属性由图像候选字符串组成，以逗号分隔，并且每个这样的字符串都有

1. 0或以下一个： 宽度描述符，包括:空格字符、表示宽度描述符值大于零的数字的有效非负整数和U+0077拉丁字母W字符。 像素密度描述符，包括:空格字符、表示像素密度描述符值大于零的有效浮点数和U+0078拉丁字母X字符。