窗口大小後的背景圖像大小調整

我對網絡開發和網頁設計很陌生，現在我正在爲一家公司的網站工作（www.momentium.no）。他們希望頂部的背景圖像能夠識別瀏覽器的窗口大小，以便在加載網站時向下滾動屏幕之前，圖像會填滿整個屏幕，並且不會顯示下面的內容。窗口大小後的背景圖像大小調整

難道你們都可以檢查嗎？獲得一點幫助會很棒！

感謝， Yngvar

來源

2013-07-18 Yngvar Kalvø

我們可以看到你的一些代碼嗎？ – Nitesh

取決於瀏覽器兼容性，你可以看看css3屬性background-size – Pete

view-source：http：//momentium.no/ 它在ID爲「background-image」的第一個div中。試圖在這裏複製它，但它是一團糟！ –

使用CSS將工作的高度設置爲100％，但你必須以保持它的流動時，窗口大小來修改你的HTML結構。

否則，你可以試試下面的代碼片段：

JS：

var $imageWrapper = $('#background-image'), 
    $contentSpacer = $('section#wrapper > header'), 

    // Some buffer value, adjust this to get the rest of the content aligned properly 
    buffer = 200; 

// Set the div height on pageload 
$(document).ready(function() { 
    var windowHeight = $(window).height(); 

    $imageWrapper.height(windowHeight); 
    $contentSpacer.height(windowHeight); 
}); 

// Change the div height on window resize 
$(window).resize(function() { 
    var $this = $(this), 
     thisHeight = $this.height(); 

    // Set the height of the image container to the window height 
    $imageWrapper.height(thisHeight); 
    $contentSpacer.height(thisHeight - buffer); 
});

CSS：

#background-image { 
    background-size: cover; 

    // Change this to the minimum height your page will support 
    min-height: 600px; 
}

你的代碼的其餘部分似乎是正確的，所以添加這些應該可以解決問題。幾件事情要記住這裏：

的JS不放置任何限制的高度這裏被應用，因此，如果調整窗口的大小爲10px高度CSS仍將甚至適用。大多數設計在折斷前都有最小高度/寬度，因此在#background-image div上使用min-height可能是個不錯的主意。
在實施之前檢查browser support，如果您需要支持其中一種不受支持的瀏覽器，則需要編寫回退或重新構建代碼，以便優雅地降級。 IE9 +，Chrome21 +和FF26 +應該不錯。
看起來您在主要部分中使用了間隔符，以確保頁面內容在主滑塊之後進入。可以修改頁面的結構，以便不必修改兩個元素高度。正如我在開始時所提到的，如果您重新構建，您可以使用純CSS解決方案。

來源

2013-07-18 13:03:02 godfrzero

你可以有2個解決方案：

皮特說，你可以使用「背景大小」 CSS3，但它不會是舊的瀏覽器
兼容您可以使用JavaScript和$(window).height()和$(window).width

來源

2013-07-18 09:44:41

感謝您的快速響應！我會檢查一下，看看它是否有效！ –

的唯一方法是創建爲y的repponsive設計我們company..all問題將響應式設計來解決......

改變圖像大小取決於瀏覽器窗口大小的其他明智
改變形象，另外一個也有可能

來源

2013-07-18 10:10:42

這是非常建設性的！對於這樣的BS可以隨意使用評論。 –

你可以設置你的「背景圖像」div的高度爲100％，它會起作用。

檢查這個代碼：

#background-image { 
width: 100%; 
height: 100% !important; 
position: absolute !important; 
overflow: hidden; 
text-align: center; 
background: #000; 
}

來源

2013-07-18 10:18:05 Harshad

窗口大小後的背景圖像大小調整

回答

相關問題