html - SRCSET 的 W3C 验证

Question

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 像素宽图像。

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

Answer 1

这仅回答您的更新: 原因是，浏览器从您的 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" />

我不太了解您的图像布局，但我怀疑这里的尺寸是否正确。如果此图像全角显示到 1420px，则您的尺寸属性应如下所示。

尺寸=“(最小宽度:1420px)1420px，100vw”

或

尺寸=“(最大宽度:1420px)100vw，1420px”

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