Firefox 忽略最小宽度和最大宽度的图像大小属性

Question

以下代码（http://iamkate.com/sizes/ 上的现场演示）在 Firefox (61.0.1) 中的行为不同于 Chrome 和 Edge：

<!DOCTYPE html>
<html>
  <head>
    <title>
      Sizes issue
    </title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
  </head>
  <body>
    <img
      src="big.png"
      srcset="big.png 1024w,small.png 128w"
      sizes="(min-width:512px) and (max-width:767px) 100vw,128px"
      alt="">
  </body>
</html>

当视口宽度介于 512 和 767 像素之间时，Chrome 和 Edge 显示 big.png（并将其拉伸至全视口宽度），而 Firefox 仅显示 small.png 并显示它的宽度为 128 像素。但是，如果媒体条件更改为只有最小宽度或最大宽度，Firefox 将在相应的视口宽度处显示 big.png。

在真实站点上，图像的大小将使用 CSS 而不是依赖于隐式大小，结果是 Firefox 显示的分辨率太低的版本（您可以验证我的修改我的例子）。

我知道在这个简化示例中可以重写 sizes 属性以避免组合 min-width 和 max-width，但这不适用于具有多个此类子句的更复杂的情况。

我搜索了 Stack Overflow 和 Firefox 的 Bugzilla，但找不到任何关于在单一媒体条件下组合最小宽度和最大宽度的问题的参考资料。

Answer 1

提交 Bugzilla 报告后，它被标记为此错误的副本：

https://bugzilla.mozilla.org/show_bug.cgi?id=1422225

显然 Firefox 还不支持在 sizes 属性中组合媒体查询的语法，尽管它在 CSS 和 JavaScript matchMedia 函数中支持它。该错误被标记为已修复，目标是 Firefox 63。

Firefox 忽略最小宽度和最大宽度的图像大小属性

Image sizes attribute with both min-width and max-width ignored by Firefox

html

responsive-design

responsive-images