W3C验证SRCSET [英] W3C Validation of SRCSET

问题描述

W3C验证程序在以下代码上引发错误:

W3C Validator is throwing an error on the following code:

<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/zh-CN/news/20140214-01.jpg 1x， /images/zh-CN/news/20140214-01-mobile.jpg 640w，用于srcset属性 元素img:未为图片指定宽度 /images/zh-CN/news/20140214-01.jpg. (因为一张或多张图片 候选字符串指定宽度(例如，图片的字符串 /images/zh-CN/news/20140214-01-mobile.jpg)，所有候选图片 字符串必须指定宽度.)

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验证程序满意的方式.

So, how do I specify both an image for pixel density (1x) -- down the road I may want to do one for high-density displays (2x) and for displays less than 640 pixels wide? That is, in a way that will make the W3C validator happy.

更新:

好吧，我对其进行了一些修改，现在验证器不再抱怨，但是它似乎没有正常工作，因此我认为我还没有赢得战斗.

Well, I tinkered around some more with it and now the validator is no longer complaining but it doesn't appear to be working right so I don't think I have won the battle yet.

我现在有这个:

<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上，无论我的屏幕有多宽，我都只会看到移动"图像.我希望它在比640px宽的任何显示器上显示完整的1420px宽的图像.

BUT, now on Chrome I am getting just the "-mobile" image, regardless of how wide my screen is. I want it to display the full 1420px wide image on any display that is wider than 640px.

我想我只有一件事情不对劲……任何帮助将不胜感激.

I am guessing I have just one thing out of place... any help would be appreciated.

推荐答案

此答案仅针对您的更新: 这样做的原因是，浏览器从srcset中选择一个候选，而src属性用作后备.这意味着要获得更大的候选者，您还需要将其添加到您的srcset:

This answers only for your update: The reason for this is, that the browser chooses one candidate from your srcset, the src attribute is used as a fallback. This means to get the larger candidate you need to also add it to your 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像素之前，您的尺寸属性应如下所示.

I don't really know your image layout, but I doubt, that sizes is correct here. If this image is displayed fullwidth until 1420px your sizes attribute should look like this.

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

或

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

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

Additionally you should use more images. Note if you use the width descriptor the browser automatically handles the density for you (for retina devices). Use at least 640w, 980w/1024w, 1420w, 2048w.

这篇关于W3C验证SRCSET的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！