Firefox 中的背景图像放大答案

【问题标题】：background image zoom in firefoxFirefox 中的背景图像放大
【发布时间】：2014-09-05 19:07:52
【问题描述】：

当我在做这个项目时，我遇到了在操作系统窗口下在 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;
}

【问题讨论】：

标签： html css firefox zooming background-image

【解决方案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

【讨论】：

我打开了您的示例并放大了 90%，错误仍然存在。 Im using the actual version of firefox – 32. By the way it doesnt 取决于单位的大小，即使我在 Im zooming the picture is still cut off. By the way, this problem is present on many sites, for example http://www.apple.com/choose-your-country/ if you set the scale to 80% are cropped languages 图标时设置了 35px 的宽高。
知道了，我在 Firefox 中看到了同样的问题。我知道这不会是一个答案，但谁在缩小？ :) 现在人们设计放大，只是说。而且我刚才看到，如果您放大 stackoverflow 徽标在底部被裁剪...