SRCSET 的 W3C 验证
W3C Validation of SRCSET
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.jpg 1x, /images/en-us/news/20140214-01-mobile.jpg 640w" style="border-width: 0px;" title="A Unique Image" width="1420" itemprop="image">
错误是：
Bad value /images/en-us/news/20140214-01.jpg 1x,
/images/en-us/news/20140214-01-mobile.jpg 640w for attribute srcset on
element img: No width specified for image
/images/en-us/news/20140214-01.jpg. (Because one or more image
candidate strings specify a width (e.g., the string for image
/images/en-us/news/20140214-01-mobile.jpg), all image candidate
strings must specify a width.)
那么，我如何指定像素密度 (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 像素宽图像。
我猜我只有一件事不对...任何帮助将不胜感激。
请参考http://www.webkit.org/demos/srcset/ or https://ericportis.com/posts/2014/srcset-sizes/。基于 w3c 验证器，如果您为图像候选字符串之一指定宽度描述符，那么您应该为所有这些字符串使用宽度描述符。
备选方案可以是使用 CSS 媒体查询。
此答案仅供您更新：
这样做的原因是，浏览器从您的 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="(min-width: 1420px) 1420px, 100vw"
或
sizes="(max-width: 1420px) 100vw, 1420px"
另外你应该使用更多的图片。请注意，如果您使用宽度描述符，浏览器会自动为您处理密度（对于 Retina 设备）。至少使用640w、980w/1024w、1420w、2048w。
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.jpg 1x, /images/en-us/news/20140214-01-mobile.jpg 640w" style="border-width: 0px;" title="A Unique Image" width="1420" itemprop="image">
错误是：
Bad value /images/en-us/news/20140214-01.jpg 1x, /images/en-us/news/20140214-01-mobile.jpg 640w for attribute srcset on element img: No width specified for image /images/en-us/news/20140214-01.jpg. (Because one or more image candidate strings specify a width (e.g., the string for image /images/en-us/news/20140214-01-mobile.jpg), all image candidate strings must specify a width.)
那么，我如何指定像素密度 (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 像素宽图像。
我猜我只有一件事不对...任何帮助将不胜感激。
请参考http://www.webkit.org/demos/srcset/ or https://ericportis.com/posts/2014/srcset-sizes/。基于 w3c 验证器，如果您为图像候选字符串之一指定宽度描述符，那么您应该为所有这些字符串使用宽度描述符。
备选方案可以是使用 CSS 媒体查询。
此答案仅供您更新：
这样做的原因是，浏览器从您的 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="(min-width: 1420px) 1420px, 100vw"
或
sizes="(max-width: 1420px) 100vw, 1420px"
另外你应该使用更多的图片。请注意，如果您使用宽度描述符，浏览器会自动为您处理密度（对于 Retina 设备）。至少使用640w、980w/1024w、1420w、2048w。