响应图像: Srcset &size

Question

我正在实现当前项目中的响应映像，并引用了这篇关于CSS-Tricks的文章，他在其中使用了以下示例：

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">

我在自己的项目中使用了这种格式，只指定了宽度选择，有趣的是，W3C验证器告诉我：

当srcset属性有任何带有宽度描述符的图像候选字符串时，“size”属性也必须出现

我意识到规范正在发展，这可能更像是一个验证器问题，但我似乎找不到一个明确的答案，这是否真的是真的。根据我所读到的，按宽度指定源应该足够帮助浏览器做出最佳选择。

在我的项目中，我有一个Pinterest样式的网格布局，三列图像通过断点向下调整为一列；我还想知道我的sizes标记在这方面是否正确：

<img src="img/tile-320.jpg"
     srcset="img/tile-480.jpg 480w, img/tile-720.jpg 720w"
     sizes="(min-width: 768px) 33.3vw, (min-width: 568px) 50vw, 100vw"
     alt="srcset test">

因此，我有三个图像大小，以320px版本作为默认/回退，在768 as之后，网格有三列；在568 as时，它有两个；否则，可以假设列/图像填充视口宽度。

因此，我的问题是：(1)在指定基于宽度的备用源时，浏览器实际上是否需要sizes？(2)在上面的实现中，使用sizes的标记正确吗？

Answer 1

当指定基于宽度的备用源时，浏览器是否实际需要大小？

如果没有指定浏览器将采用默认的sizes="100vw“，则指定大小不是强制性的。

在上述实现中，我的标记使用的大小正确吗？

对我来说，尺寸的主要用途是告诉浏览器在不同分辨率上图像的宽度应该是多少。