【问题标题】: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 的所有内容。根据您的目标受众,您可以使用emrem,以便他们“关注”页面的修改。

    我的代码:

    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 徽标在底部被裁剪...
    猜你喜欢
    • 2013-07-21
    • 1970-01-01
    • 1970-01-01
    • 2013-11-17
    • 1970-01-01
    • 2012-05-23
    • 2023-04-07
    • 2012-09-23
    相关资源
    最近更新 更多