Firefox 忽略最小宽度和最大宽度的图像尺寸属性答案

【问题标题】：Image sizes attribute with both min-width and max-width ignored by FirefoxFirefox 忽略最小宽度和最大宽度的图像尺寸属性
【发布时间】：2018-07-31 11:17:41
【问题描述】：

以下代码（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 像素宽显示它。但是，如果将媒体条件更改为只有 min-width 或 max-width，Firefox 将在相应的视口宽度处显示 big.png。

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

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

我搜索了 Stack Overflow 和 Firefox 的 Bugzilla，但在单个媒体条件中结合 min-width 和 max-width 找不到任何关于此问题的参考。

【问题讨论】：

标签： html responsive-design responsive-images

【解决方案1】：

在提交 Bugzilla 报告后，它被标记为与此错误重复：

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

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

【讨论】：