2

W3C Validator 对以下代码抛出错误：

<img alt="My Unique Alternative Text" class="news-image-left" height="480" src="/images/en-us/news/20140214-01.jpg" srcset="/images/en-us/news/20140214-01.jpg 1x, /images/en-us/news/20140214-01-mobile.jpg 640w" style="border-width: 0px;" title="A Unique Image" width="1420" itemprop="image">

错误是：

错误值 /images/en-us/news/20140214-01.jpg 1x，/images/en-us/news/20140214-01-mobile.jpg 640w 元素 img 上的属性 srcset：没有为图像 /images/ 指定宽度en-us/news/20140214-01.jpg。（因为一个或多个候选图像字符串指定了宽度（例如，图像字符串 /images/en-us/news/20140214-01-mobile.jpg），所有候选图像字符串都必须指定宽度。）

那么，如何同时指定像素密度 (1x) 的图像 - 在路上我可能想要为高密度显示器 (2x) 和宽度小于 640 像素的显示器做一个？也就是说，以某种方式让 W3C 验证者高兴。

更新：

好吧，我对它进行了一些修改，现在验证器不再抱怨，但它似乎没有正常工作，所以我认为我还没有赢得这场战斗。

我现在有这个：

<img alt="My Unique Alternative Text" class="news-image-left" height="480" src="/images/en-us/news/20140214-01.jpg" srcset="/images/en-us/news/20140214-01-mobile.jpg 320w" sizes="(min-width:640px) 1420px, 320px" style="border-width: 0px;" title="A Unique Image" width="1420" itemprop="image">

但是，现在在 Chrome 上，我得到的只是“-mobile”图像，不管我的屏幕有多宽。我希望它在任何宽于 640 像素的显示器上显示完整的 1420 像素宽图像。

我猜我只有一件事不合适......任何帮助将不胜感激。

4

2 回答 2

4

这仅适用于您的更新：原因是浏览器从您的 中选择一个候选者srcset，该src属性用作后备。这意味着要获得更大的候选人，您还需要将其添加到您的srcset：

<img srcset="/images/en-us/news/20140214-01-mobile.jpg 320w, /images/en-us/news/20140214-01.jpg 1420w" sizes="(min-width:640px) 1420px, 320px" />

我真的不知道你的图像布局，但我怀疑，这sizes是正确的。如果此图像在 1420 像素之前全角显示，则您的 sizes 属性应如下所示。

sizes="(min-width: 1420px) 1420px, 100vw"

或者

sizes="(max-width: 1420px) 100vw, 1420px"

此外，您应该使用更多图像。请注意，如果您使用宽度描述符，浏览器会自动为您处理密度（对于视网膜设备）。至少使用 640w、980w/1024w、1420w、2048w。

于 2015-04-26T07:09:13.197 回答
2

请参考http://www.webkit.org/demos/srcset/或https://ericportis.com/posts/2014/srcset-sizes/。基于 w3c 验证器，如果您为图像候选字符串之一指定宽度描述符，那么您应该为所有这些字符串使用宽度描述符。

替代选项可能是使用 CSS 媒体查询。

于 2015-04-22T06:32:45.543 回答