滚动响应敏感的全屏图像

Question

我想制作，以便当用户访问我的网站以查看一个图像（100％宽度）时，当他向下滚动以便能够查看网站的其余部分时。

我已经看过这件事了...它工作了：完整页面背景图像，带垂直滚动

但是我有两个主要问题：

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，并且不会弄乱内容。