如果瀏覽器窗口大於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覆蓋

回答

相關問題