适合窗户高度的图像

Question

我正在尝试实现与this类似的东西，其中有一个图像填充窗口，直到向下滚动。我真的不知道如何实现这一目标。我在猜jQuery？我真的找不到任何东西。我对jQuery的了解有限，尽管我对Javascript有所了解。

感谢您的帮助。

---

Answer 1

你根本不需要jQuery或Javascript。你需要一个带有背景图像的全屏div。

<强> Working JSFiddle

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来绝对定位。这会拉伸它，但不会调整大小。

Answer 2

您可以尝试将vw用作width单元。

<强> Fiddle

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

---

img{
    width:100vw;
}

vw是视口宽度。

Answer 3

有两种方法可以解答这个问题。我不确定你需要哪个答案，所以我会同时提供这两个答案。

您可以将图像覆盖在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