Srcset 不工作 Firefox
Srcset not working Firefox
我正在尝试使用 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" />
编辑添加：哟，你是从哪个教程中获得该标记的？我刚刚意识到这看起来像是在尝试使用旧的 srcset 语法，没有人实现过它，这是一个坏主意。如果你能指出你从哪里得到它，我们可以尝试让那个教程更新，防止更多人犯同样的错误。
首先，w和x混用是无效的。这不应该是你问题的直接原因，但它会导致完全不可预测的行为。 （根据其值和 sizes 属性的值，w 描述符被转换为等效的 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 时，这将 select 桌面图像，否则默认为移动图像。
另一方面，如果桌面和移动图像是相同的图像，只是分辨率不同，那么您确实想要使用 <img srcset>，但坚持使用 x 或 w 对于他们两个。如果图像是静态大小，则使用 x，或者允许使用 "native" 大小。如果您的布局将图像设置为特定大小，请使用 w（和 sizes）。然后不用担心图像何时切换；如果您声明正确，浏览器将为您做出合理的选择。
我正在尝试使用 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" />
编辑添加：哟，你是从哪个教程中获得该标记的？我刚刚意识到这看起来像是在尝试使用旧的 srcset 语法，没有人实现过它，这是一个坏主意。如果你能指出你从哪里得到它，我们可以尝试让那个教程更新，防止更多人犯同样的错误。
首先，w和x混用是无效的。这不应该是你问题的直接原因，但它会导致完全不可预测的行为。 （根据其值和 sizes 属性的值，w 描述符被转换为等效的 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 时，这将 select 桌面图像，否则默认为移动图像。
另一方面，如果桌面和移动图像是相同的图像，只是分辨率不同，那么您确实想要使用 <img srcset>，但坚持使用 x 或 w 对于他们两个。如果图像是静态大小，则使用 x，或者允许使用 "native" 大小。如果您的布局将图像设置为特定大小，请使用 w（和 sizes）。然后不用担心图像何时切换；如果您声明正确，浏览器将为您做出合理的选择。