HTML srcset规范:澄清

时间:2015-07-16 22:31:36

标签: html5 image srcset

我编写了一个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示例中的最后一张图片是规格吗?
  • 示例中的其他内容是否错误?

由于

2 个答案:

答案 0 :(得分:4)

不,您只能指定其中之一。看来,你不明白宽度描述符是如何工作的。只要使用宽度描述符,就不再需要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像素,另外如果视口是最小宽度,则图像显示为400像素:否则它是显示在全视口宽度(100vw)。

然后,浏览器会根据您的尺寸属性自动计算宽度。例如,如果您正在使用360px宽的设备,则会拍摄100vw的尺寸(因为它低于480px)并计算为360px布局像素。然后浏览器按分度计算每个候选人的密度:宽度描述符/计算出的大小):

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

然后,浏览器会根据设备的像素比选择设备的最佳候选者。因此,它需要1x设备上的480宽图像和2x设备上的720宽图像。

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

是的,已经有一个polyfill处理这个很好。

答案 1 :(得分:1)

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

  
      
  1. 零或一个以下内容:

         

    宽度描述符,由以下部分组成:空格字符,有效的非负整数,表示大于零的数字   宽度描述符值和U + 0077 LATIN SMALL LETTER W.   字符。

         

    像素密度描述符,包括:空格字符,给出大于零的数字的有效浮点数   表示像素密度描述符值,以及U + 0078 LATIN   小写字母X字符

  2.