Html 如果浏览器窗口大于1138px × ；825px

所以，我正在编程一个网站和身体bg图像设置为背景图像：封面。它工作正常，但有一个问题。我的背景图像是1138px × 825px，如果浏览器窗口小于1138px，我希望它保持这些尺寸 × 825px。我希望图像的行为像一个正常的背景图像，而不是收缩。浏览器打开时大于1138px × 825px我希望css封面功能生效。我曾尝试应用最小高度/最小宽度和高度/宽度，但没有成功。有什么想法或解决方案吗？先谢谢你。网站和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:

---

我没有测试这一点，但这在逻辑上应该是可行的：

'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

背景大小，因为它不再需要了

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

注意：如果可能，请尝试升级jQuery。我知道您使用的是1.7.2，尝试使用1.9.x
我没有对此进行测试，但这在逻辑上应该是可行的：

'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
背景大小，因为它不再需要了

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

注意：如果可能，请尝试升级jQuery。我看到您使用了1.7.2，请尝试使用1.9.x，在css中实现这一点的唯一方法是使用

@media (min-width: 1138px) and (min-height: 828px){
// your code for larger display
}

在css中实现这一点的唯一方法是使用

@media (min-width: 1138px) and (min-height: 828px){
// your code for larger display
}

本例中所需的条件仅在JavaScript中可用。本例中所需的条件仅在JavaScript中可用。我注意到，在移动开发中，许多手机/平板电脑浏览器忽略了
@media
标记：（这需要大量的测试来确定它是否能在每个浏览器/平台上正常工作。我对此并不确信，因为bootstrap使用它来实现响应性显示，直到现在一切都很好，我只是希望如此。^^我注意到，在移动开发中，许多手机/平板电脑浏览器忽略了
@media
标记，很遗憾：（这需要进行大量测试，以确定它是否能在每个浏览器/平台上按预期工作。我对此不满意，因为bootstrap使用它进行响应显示，直到现在一切都正常工作。我只是希望如此，为了Brian的缘故。^^谢谢大家的评论！看起来Javascript将成为解决方案。谢谢大家的评论！看起来Javascript将成为解决方案。