有滚动响应的全屏图像

Question

我想这样做，当用户访问我的网站时，只看到一个图像(100%宽度)，当他向下滚动，以便能够查看网站的其余部分。

我看过这个，并尝试过it...it works：垂直滚动的全页背景图像

但我有两个主要问题：

1. 通过这种方法，我必须使用位置:对于图像下面的每个部分都是绝对的(我将至少有不同的4-5节内容)。这是正确的做法吗？
2. 这种方法似乎没有反应，有什么办法吗？

Answer 1

你根本不用用位置。一旦您设置了一个div的大小与屏幕大小，您的所有其他内容将在下面。

给你：示例

image div将包含您的映像，并将其设置为width: 100%和height: 100%。

然后，只需将内容添加到这个div下面即可。

HTML：

<div class='image'>
    <img src="image.jpg" />
</div>
<div class='content'>Content</div>

CSS：

html, body{
    margin: 0;
    height: 100%;
}

.image{
    width:100%;
    height:100%;
    background: green;
}

.image img{
    width:100%;
    height:100%;
}

.content {
    width:100%; height: 100px;
}

您还需要添加

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

以支持所有屏幕大小。

Answer 2

试试这个：http://jsfiddle.net/stddC/

这样，图像将是100%的height和width，不会扰乱内容。