如果浏览器窗口大于1138px×825px将覆盖CSS覆盖

因此，我正在编程一个站点，并将body bg图像设置为background-image：cover。它工作正常，但有一个问题。我的背景图片是1138px×825px，如果浏览器窗口小于1138px×825px，我希望它保持在这些尺寸。我希望图像像普通背景图像一样起作用，而不是缩小。当浏览器打开大于1138像素×825像素时，我想要使用css封面功能。我尝试了应用最小高度/最小宽度和最大高度/宽度，但没有成功。任何想法或解决方案？提前致谢。网站和CSS代码如下。如果浏览器窗口大于1138px×825px将覆盖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>

来源

2013-03-07 Brian Stone

你在这种情况下，需要的是唯一可能的JavaScript中的条件语句。 – 2013-03-07 08:58:02

我没有测试，但这应该在逻辑上的工作：

'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-07 09:13:13

感谢大家的评论！看起来像Javascript将成为解决方案。 – 2013-03-09 17:06:49

只有这样，才能做到这一点在CSS与

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

来源

2013-03-07 09:18:13 gsmida

我注意到在移动开发中，许多手机/平板电脑浏览器黯然无视'@ media'标签:(这将需要大量的测试，以确保它是否可以按照预期在每个浏览器/平台上工作。 – 2013-03-07 09:19:53

我不是sur因为引导程序使用它来响应显示，直到现在一切正常 – gsmida 2013-03-07 10:01:22

我只是希望对Brian来说是这样的^^ – 2013-03-07 10:04:29

如果浏览器窗口大于1138px×825px将覆盖CSS覆盖

回答

相关问题