Srcset不工作Firefox

Question

当浏览器达到特定的屏幕大小时，我试图使用srcset属性来交换图像。当屏幕尺寸超过768像素宽时，我需要桌面图像。

在不包括firefox的大多数浏览器中，我都能用下面的代码完成这一任务。我对“srcset”游戏非常陌生，所以我不确定我的端是否有语法错误。记住视网膜设备，有人知道我在这里错过了什么吗？浏览器对srcset的支持似乎足够了，所以我不确定是什么原因造成了这种情况。

<img class="desktop-hero" alt="" src="../img/hero_desktop.jpg" srcset="../img/hero_mobile.jpg 768w, ../img/hero_desktop.jpg 1x" />

Answer 1

编辑补充:哟，你从什么教程得到的标记？我刚刚意识到，这看起来像是试图使用旧的srcset语法，没有人实现它，这是一个糟糕的想法。如果你能指出你从哪里得到它，我们可以尝试让该教程更新，并防止更多的人犯同样的错误。

首先，混合w和x是无效的。这不应该是你的问题的直接原因，但它会导致完全不可预测的行为。(w描述符根据其值和sizes属性的值转换为等效的x描述符。)

第二，w描述符不执行您所要求的任何操作。当页面上图像的最终大小不是一个硬编码的px值时，它与sizes属性一起用作间接指定图像的密度的一种方法。它与屏幕大小无关，也不隐藏任何东西。它是图像的宽度，以图像像素为单位。

现在，假设hero_desktop和hero_mobile实际上是不同的图像(不同的大小、不同的作物、不同的内容等等)，而不仅仅是同一图像的不同分辨率版本，您真正想要做的是使用<picture>。

html：

<picture>
  <source media="(min-width: 768px)" srcset="../img/hero_desktop.jpg">
  <img src="../img/hero_mobile.jpg">
</picture>

这将在屏幕为>= 768px时选择桌面图像，否则默认为移动图像。

另一方面，如果桌面图像和移动图像是相同的图像，只是分辨率不同，那么您确实希望使用<img srcset>，但是对两者都坚持使用x或w。如果图像是静态大小，或者允许它是“本地”大小，请使用x。如果通过布局将图像设置为特定大小，则使用w (和sizes)。然后，不要担心图像何时切换；如果您声明正确，浏览器将为您做出合理的选择。