Question

Firefox 88 现在支持 image-set，这是个好消息，但与其他浏览器不同的是，如果不设置 background-size:cover;

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

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

>

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

我在 webkit 浏览器上使用 image-set 已经有几年了，它一直可以正常工作，无需设置 background-size。难道我做错了什么？还是 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>

Answer 1

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

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

图像集在不使用背景大小的情况下不起作用：Firefox 88 上的封面

1 个答案: