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显示的分辨率太低（您可以通过修改示例来验证这一点）。

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

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

Answer 1

提交Bugzilla报告后，它被标记为该bug的副本：

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

显然，Firefox虽然在CSS和JavaScript matchMedia函数中支持，但尚不支持在sizes属性内组合媒体查询的语法。该错误已标记为已修复，并且目标是Firefox 63。

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

1 个答案: