css背景重複div高度重置

我有以下的html/javascript實現。我的目標是在保持寬高比的同時調整圖像大小，以調整瀏覽器窗口的高度/寬度。然而，實現這個代碼的時候，每一個調整大小事件增長的（舊身高+新的高度DIV的高度，而不是僅僅將其設置爲新的高度。如何從這樣停止生長的股利？css背景重複div高度重置

<div class="header-pc" style="background-image: url('assets/sunset-flipped1.png');background-size: 100% auto;height:1000px"></div> 

function resizeHeaderPic(){ 
    var height = $(window).height(); 
    $('.header-pc').height(height);f 
} 
$(document).ready(function(){ 
    //resizeHeaderPic(); 
    $(window).resize(function(){ 
     resizeHeaderPic(); 
    }); 
});

來源

2013-12-21 E T

不要使用JavaScript瑣碎的CSS任務。

body { 
    background-image: url('assets/sunset-flipped1.png'); 
    background-size: cover;   /* Fit to cover entire element */ 
    background-position: center; /* Where to scale from in the image */ 
}

而你沒有任何HTML或做的JavaScript。

來源

2013-12-21 01:01:25

這會工作，假設你使用百分比，否則你仍然需要一些JavaScript。 – PHPglue

只要瀏覽器的尺寸大於原始圖片，這似乎就會起作用;將其縮小很多會導致空白區域出現在屏幕外。爲了防止這種情況，我將「overflow-x：hidden」應用於身體，並且工作。 –

尼爾斯的做法是好的。你設置div來window.height的高度。但窗口高度= window.Innerheight +滾動條/工具欄。所以每次它被增加b y滾動條的大小。

function resizeHeaderPic(){ 
    var height = $(window).innerHeight(); 
    $('.header-pc').height(height); 
}

來源

2013-12-21 01:32:08

css背景重複div高度重置

回答

相關問題