html - 为什么我的任何srcset属性都不起作用？跨浏览器的结果也不一致

Question

我试图使用srcset来执行一个简单的任务，当我的页面的小屏幕尺寸被触发为640像素宽时（我使用的是Foundation 5），将一个1000x400px的图像换成一个640x256px的图像。在我指定alt图像的尝试中，浏览器似乎默认为alt图像，并忽略其他所有内容。顺便说一下，我使用的alt大小是999x399px，这样我就可以看到是否正在显示它，而不是我的主1000x400px图像。
据我所知，我正在做的正是这方面的各种教程和文章中的指导，但我无法让它发挥作用。此外，根据我是在Firefox还是Chrome中预览结果，我会得到不同的行为。我的Firefox版本是“34.0.5”，Chrome版本是“39.0.2171.95 m”。
下面是我的HTML的示例，并对结果进行了描述。我看不出我做错了什么。完全没用。
这个在所有浏览器窗口大小的Firefox中显示1000x400px的图像，除了Chrome中缺少的图像图标之外，没有显示任何内容：

<div><img src="http://placehold.it/1000x400/444444/ffffff" srcset="http://placehold.it/640x256/444444/ffffff 640w, alt=""></div>

这个在所有浏览器大小的Firefox中显示999x399px alt图像，在所有浏览器大小的Chrome中显示640x256px小图像。此外，与下面的其他示例不同，Chrome中的640x256图像仅限于该大小，在较大的浏览器窗口中不会放大：

<div>
    <picture>
    <source srcset="http://placehold.it/640x256/444444/ffffff, http://placehold.it/1000x400/444444/ffffff">
    <source media="(min-width: 641px)" srcset="http://placehold.it/1000x400/444444/ffffff">
    <img src="http://placehold.it/999x399/444444/ffffff" alt="">
    </picture>
    </div>

这一个在Firefox和Chrome的所有浏览器窗口大小中显示999x399px alt图像：

<div>
    <source srcset="http://placehold.it/640x256/444444/ffffff, http://placehold.it/1000x400/444444/ffffff">
    <source media="(min-width: 641px)" srcset="http://placehold.it/1000x400/444444/ffffff">
    <img src="http://placehold.it/999x399/444444/ffffff" alt="">
    </div>

下面的两个示例在Firefox的所有浏览器窗口大小中显示1000x400px图像，但在Chrome的所有浏览器窗口大小中显示640x256px图像。此外，这一次，640x256px图像向上缩放以适应所有浏览器窗口大小，这与上面的第二个示例不同：

<div><picture><img alt="" src="http://placehold.it/1000x400/444444/ffffff" srcset="http://placehold.it/640x256/444444/ffffff 640w"></picture></div>

<div><img alt="" src="http://placehold.it/1000x400/444444/ffffff" srcset="http://placehold.it/640x256/444444/ffffff 640w"></div>

除了上面的例子之外，我还尝试了div、picture tags、no div和no picture tags的所有组合，但都没有成功。我整天都在做这该死的事！有人知道我做错了什么吗？跨浏览器类型的不一致结果增加了混乱。
如果你能帮忙的话，非常感谢。
编辑：我发现了一个在Chrome中工作的例子，但在Firefox中没有。我指的是这一页：http://www.web3.lu/picture-element-and-srcset-attribute/
该页的示例如下：

<img src="brain.jpg" sizes="75vw" 
 srcset="brain-small.jpg 320w, 
 brain-medium.jpg 640w, 
 brain-large.jpg 1024w,
 brain-xlarge.jpg 2000w" 
 alt="Brain Structure">

我适应了这一点：

<img src="http://placehold.it/999x399/444444/ffffff"
 sizes="100vw"
 srcset="http://placehold.it/640x256/444444/ffffff 640w, 
 http://placehold.it/1000x400/444444/ffffff 1000w"
 alt="">

我可以看到，这个例子略有不同，因为它包含了“大小”属性，它包括图像的最大宽度，但我不知道为什么没有其他的工作，尽管显然是如何使用SRCSET属性的例子。而且我仍然不知道为什么这在火狐中不起作用！在Firefox中，它只显示标准大小（非升级）的640x256px小图像。
进一步编辑：我已经研究出，除了在Chrome中完全可用外，我还可以将上面的工作示例修改为在Firefox中可以接受但不可操作的。
上面最后一段代码的问题是，在Firefox（srcset图像交换不起作用）中，我被固定大小的640x256px图像显示卡住了，所以它太小了，并且在中屏幕向上的时候是片面的，从而弄乱了显示。很明显，它默认使用小图像选项，而不是src图像或大图像。
如何修复这个问题很简单（而且对于更有经验的用户来说可能是显而易见的）：我只是简单地更改了srcset映像的顺序，使1000x400px映像成为第一个映像。这样地：

<img src="http://placehold.it/999x399/444444/ffffff"
sizes="100vw"
srcset="http://placehold.it/1000x400/444444/ffffff 1000w,
http://placehold.it/640x256/444444/ffffff 640w"
alt="">

现在我的1000x400px图像全部显示出来。虽然这可能不符合“移动第一”的原则，但我找不到一种方法来放大640x256px的图像，以适应中大屏幕。此外，对我来说，放大这个小图像，从而影响它在大屏幕上的质量，要比被迫将1000x400px的图像传送到小屏幕上付出更大的代价。
我仍在寻找一种方法，使上述最后的例子也在火狐工作，但无论如何，我希望以上的一些是帮助其他初学者，如果只是提供一些例子，什么是不工作。
最终编辑并解决问题：
多亏Alexander Farkas在下面发帖，我现在找到了解决办法。在此链接上：
https://github.com/aFarkas/respimage
我滚动到名为“srcset with the width w descriptor and the size attribute”的部分，然后尝试代码笔示例。
这在Firefox中非常有效。它执行了图像交换，尽管我确实需要在每个窗口大小（除了最小的图像）刷新浏览器，否则每次都不会显示交换图像的新大小。
谢谢您！

Answer 1

<div><img src="http://placehold.it/1000x400/444444/ffffff" srcset="http://placehold.it/640x256/444444/ffffff 640w, alt=""></div>

这里您缺少一个引号，因此实际上选择了alt=URL，这可能会给您一个404响应。

<div>
    <picture>
    <source srcset="http://placehold.it/640x256/444444/ffffff, http://placehold.it/1000x400/444444/ffffff">
    <source media="(min-width: 641px)" srcset="http://placehold.it/1000x400/444444/ffffff">
    <img src="http://placehold.it/999x399/444444/ffffff" alt="">
    </picture>
    </div>

这将始终在一致的实现中选择http://placehold.it/640x256/444444/ffffff。sources是按标记顺序计算的，因为第一个source没有任何其他属性，但是srcset，所以它被选中，然后它的srcset中的第一个候选也被选中，因为它们都没有描述符（所以它们都是1x）。

<div>
    <source srcset="http://placehold.it/640x256/444444/ffffff, http://placehold.it/1000x400/444444/ffffff">
    <source media="(min-width: 641px)" srcset="http://placehold.it/1000x400/444444/ffffff">
    <img src="http://placehold.it/999x399/444444/ffffff" alt="">
    </div>

是的，那是唯一的候选人。如果没有父元素，则不考虑source元素。
...
我建议您通过https://validator.nu/这样的验证器来运行标记。它会指出这样的错误。:-)