4

我已经编写了一个 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在规格范围内？
  • 示例中的其他内容是否不正确？

谢谢

4

2 回答 2

6

不可以，您只能指定两者之一。看来，您不了解宽度描述符的工作原理。一旦你使用了宽度描述符，你就不再需要 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-width: 480px，则图像以 400 像素显示，否则显示在全视口宽度（100vw）。

然后浏览器会根据你的 sizes 属性自动计算宽度。例如，如果您使用 360px 宽的设备，则采用 100vw 的尺寸（因为它低于 480px）并计算为 360px 布局像素。然后浏览器通过除法计算每个候选的密度：宽度描述符/计算大小）：

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

然后浏览器会根据设备的像素比为设备选择最佳候选者。所以它在 1x 设备上拍摄 480 宽的图像，在 2x 设备上拍摄 720 宽的图像。

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

是的，已经有一个 polyfill 可以很好地处理这个问题。

于 2015-07-17T15:39:08.700 回答
1

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

  1. 以下零项或一项：

    宽度描述符，包括：一个空格字符、一个有效的非负整数，给出一个大于零的数字，表示宽度描述符值，以及一个 U+0077 拉丁小写字母 W 字符。

    一个像素密度描述符，包括：一个空格字符，一个有效的浮点数，一个大于零的数字表示像素密度描述符值，以及一个 U+0078 LATIN SMALL LETTER X 字符

于 2015-07-17T00:09:53.910 回答