如果不使用背景大小，图像集不起作用：Firefox 88 上的封面答案

【问题标题】：image-set does not work without using background-size: cover on Firefox 88如果不使用背景大小，图像集不起作用：Firefox 88 上的封面
【发布时间】：2021-07-27 22:26:48
【问题描述】：

现在 Firefox 88 支持 image-set，这是个好消息，但与其他浏览器不同，如果不设置 background-size:cover ，它似乎无法工作；

要对此进行测试，您需要使用 Firefox 88 并具有高像素密度屏幕，以便 image-set 使用高分辨率 2x 背景图像，显示的图像将显示文本“Retina image-set ' 如果这两个都是真的。

使用 Firefox 88 运行以下代码 sn-p，您会注意到示例 1 显示了整个图像，而第二个示例，没有 background-size:cover，将仅显示将显示为拉伸的图像的一部分。

现在再次尝试使用最新的 webkit 浏览器，您会发现两个示例都正确显示了图像。

我已经在 webkit 浏览器上使用 image-set 好几年了，它一直都能正常工作，无需设置背景大小。难道我做错了什么？还是 FF 88 中的错误？

任何帮助将不胜感激:-)

#test {
        background-image: url(https://cloudfour.com/examples/image-set/assets/no-image-set.png); /*Fallback for browsers that dont support image-set*/
        background-image: -webkit-image-set(url(https://cloudfour.com/examples/image-set/assets/test.png) 1x,url(https://cloudfour.com/examples/image-set/assets/test-hires.png) 2x);/*-webkit- prefix for webkit browsers*/
        background-image: image-set(url(https://cloudfour.com/examples/image-set/assets/test.png) 1x,url(https://cloudfour.com/examples/image-set/assets/test-hires.png) 2x);/*Unprefixed image-set, which is now supported in Firefox 88*/
        width:200px;
        height:75px;
        }
        
        .add_cover { background-size: cover; }

Example 1 - With background-size: cover:
<div id="test" class="add_cover"></div>

Example 2 - Without background-size: cover:
<div id="test"></div>

【问题讨论】：

标签： css firefox background-size imageset

【解决方案1】：

原来这是 Firefox 88 中的一个错误，该错误已在 Firefox 89 中修复，将于 2021 年 6 月上旬发布

FF 错误报告：https://bugzilla.mozilla.org/show_bug.cgi?id=1705877

【讨论】：