背景圖片放大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