適合窗口高度的圖像

我試圖實現與this類似的東西，其中有一個圖像填充窗口，直到向下滾動爲止。我真的不知道如何做到這一點。我通過jQuery猜測？我真的一直無法找到任何東西。我對jQuery的瞭解是有限的，儘管我對JavaScript有所瞭解。適合窗口高度的圖像

謝謝你的幫助。

大div的背景圖像是最簡單的方法。如果您想要視差，請使用視差庫。 – Brad

另一個使用body和現代「背景大小」的例子 - http://jsfiddle.net/anXHU/ –

你根本不需要jQuery或Javascript。你需要一個全屏幕div和背景圖片。

HTML：

<div class="fullscreenimg"></div>

CSS：

.fullscreenimg { 

    background-image:url(IMAGEURL); 

    background-size:cover; 

    width:100%; 

    height:100%; 

}

編輯：正如評論指出的那樣，這將在現代瀏覽器和幾個回來工作，但它不適用於IE的舊版本（6-8）。

舊版本瀏覽器另一種方法是使用<img>，並將它定位絕對，有top，bottom',左向右, and, all being set to 0`。這會拉伸它，而不是調整大小。

2014-03-06 19:21:06

***注意：***背景大小未在IE 9以下實現。http://caniuse.com/background-img-opts –

公平點。爲舊版瀏覽器添加了一個替代方案。 –

哦，我的天啊，我覺得很傻。我一直在爲身體背景做這件事，而我從來沒有想過要做一個div。這是我第一次玩網絡編碼一段時間。顯然我有點生疏哈哈！非常感謝！ – user3389724

您可以嘗試使用vw爲width單元。

<img src="http://placehold.it/1024x768" />

img{ 
    width:100vw; 
}

VW是視口寬度。

2014-03-06 19:20:02

謝謝，我對vw一無所知！ – user3389724

沒問題。但這是否適合你？ –

它的工作，但沒有規模。另一位回答了工作。 – user3389724

有兩種方法可以回答這個問題。我不確定你需要哪種答案，但我不能提供。

您可以使圖像覆蓋veiwport高度，然後您可以使其覆蓋窗口高度。

第一種方式是比較棘手的方式，但比你想象的還要簡單。 HTML

<img src="whatever.png" class="bam">

CSS

.bam {height:100%; width:100%;}

jQuery的

var fullheight = $(document).height(); 
$(".bam").css("height", fullheight);

下面介紹如何讓它在全窗口大小。 Full size window stretch - Fiddle

這一個顯示視口的版本。 Viewport stretch image - fiddle

2014-03-06 19:46:37

回答