1

所以我正在编写一个网站，body bg 图像设置为 background-image:cover。它工作正常，但有一个问题。我的背景图片是 1138px × 825px，如果浏览器窗口小于 1138px × 825px，我希望它保持这些尺寸。我希望图像表现得像普通背景图像而不是缩小。当浏览器打开大于 1138px × 825px 时，我希望 css 封面功能启动。我尝试应用 min-height/min-width 和 height/width 但没有占上风。有什么想法或解决方案吗？提前非常感谢。网站和 CSS 代码如下。

网站：test.baysidemarket.com

CSS 代码：

#home{
background:url('imgs/back01.jpg') no-repeat top left fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 1000px;
height: 725px;

}

html:

<body id="home">
</body>
4

2 回答 2

1

在 css 中做到这一点的唯一方法是使用

@media (min-width: 1138px) and (min-height: 828px){
// your code for larger display
}
于 2013-03-07T09:18:13.240 回答
0

我没有对此进行测试，但这在逻辑上应该有效：

'use strict';
$(document).ready(function(){
    var body_w = $('body').css('width').replace('px', '') * 1;
    var body_h = $('body').css('height').replace('px', '') * 1;
    console.log(body_w + 'x' + body_h);

    // Initial check
    if (body_w > 1138 && body_h > 825) {
        $('body').css({
            '-webkit-background-size' : 'cover',
            '-moz-background-size' : 'cover',
            '-o-background-size' : 'cover'
            'background-size' : 'cover'
        });
    }

    $(window).resize(function(){
        var body_w = $('body').css('width').replace('px', '') * 1;
        var body_h = $('body').css('height').replace('px', '') * 1;

        if (body_w > 1138 && body_h > 825) {
            $('body').css({
                '-webkit-background-size' : 'cover',
                '-moz-background-size' : 'cover',
                '-o-background-size' : 'cover'
                'background-size' : 'cover'
            });
        }
        else {
            $('body').css({
                '-webkit-background-size' : 'auto',
                '-moz-background-size' : 'auto',
                '-o-background-size' : 'auto'
                'background-size' : 'auto'
            });
        }
    });
});

它会进行初始检查是否应该使用cover并在调整窗口大小时再次检查。

不要忘记删除最初的 CSS background-size，因为它不再需要了。

#home{
    background:url('imgs/back01.jpg') no-repeat top left fixed;
    width: 1000px;
    height: 725px;
}

注意：如果可能，请尝试升级您的 jQuery。我看到你使用 1.7.2，尝试使用 1.9.x

于 2013-03-07T09:13:13.263 回答