当我的页面的小屏幕尺寸以 640 像素宽触发时（我使用的是 Foundation 5），我正在尝试使用 srcset 执行将 1000x400px 图像交换为 640x256px 图像的简单任务。在我指定替代图像的尝试中，浏览器似乎默认为该图像并忽略其他所有内容。顺便说一句，我使用的 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 中显示所有浏览器窗口大小的 1000x400 像素图像，但在 Chrome 中显示所有浏览器窗口大小的 640x256 像素图像。此外，这一次 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、图片标签、没有 div 和没有图片标签的所有组合，但没有任何效果。我整天都在做这该死的事情！谁能看到我在这里做错了什么？跨浏览器类型的不一致结果增加了混乱。
如果您能提供帮助，请提前非常感谢。
编辑：我找到了一个适用于 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 中不起作用！在 Firefox 中，它仅以标准（非放大）尺寸显示 640x256px 小图像。
进一步编辑：我已经知道我可以调整上述工作示例，使其在 Firefox 中可以接受但无法操作，除了在 Chrome 中功能齐全。
我上面的最终代码的问题在于，在 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 图像以适应中大屏幕。此外，放大小图像并因此影响其在大屏幕上的质量对我来说比被迫将 1000x400 像素的图像传送到小屏幕上的惩罚更大。
我仍在寻找一种方法使上述最后一个示例也可以在 Firefox 中运行，但无论如何，我希望上面的一些内容对其他初学者有所帮助，如果只是提供一些不起作用的示例。
带有问题解决方案的最终编辑：
感谢下面发布的 Alexander Farkas，我现在找到了解决方案。在此链接上：
https://github.com/aFarkas/respimage
我滚动到名为“带有宽度 w 描述符和尺寸属性的 srcset”的部分，然后我尝试了 Codepen 示例。
这在 Firefox 中运行良好。它执行了图像交换，尽管我确实必须在每个窗口大小（最小的图像除外）刷新浏览器，否则它不会每次都显示交换图像的新大小。
谢谢！