背景图片放大Firefox

Question

当我从事该项目时，我遇到了在操作系统窗口下使用Firefox缩放的问题。 如果您将浏览器页面的缩放比例从100％更改为90％（例如），则切断背景图像，则该问题仅在Firefox中出现，并且仅在Windows或Ubuntu中出现，在Mac os上正常工作。 可能有人遇到，并会建议您如何解决此错误。

示例： http ： //jsfiddle.net/uL53nd7z/1/

div {
    background-image: url(http://oi60.tinypic.com/jal5wh.jpg);
    background-repeat: no-repeat;
    height: 23px;
    width: 23px;
}

Answer 1

您可以使用background-size: cover在高度和宽度上添加相对单位，以便图像使用div的所有内容。 根据您的目标受众，可以使用em或rem以便他们“关注”页面的修改。

我的代码：

html {
    font-size: 12px;
}

div {
    background-image: url(http://oi60.tinypic.com/jal5wh.jpg);
    background-repeat: no-repeat;
    height: 1.916666666666667rem; /*23/12*/
    width: 1.916666666666667rem;
    -webkit-background-size: cover;
    background-size: cover;
}

结果jsFiddle