Question

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

我已经看过这个并试过了......它有效：Full page background image with vertical scrolling

但我有两个主要问题：

通过这种方法，我必须对图像下方的每个部分使用position：absolute（我将至少有不同的4-5个部分包含内容）。这是正确的做法吗？
这种方法似乎没有响应，是否有办法实现？

Answer 1

您根本不必使用位置。使用屏幕尺寸设置div的大小后，其余所有内容都将低于。

在这里：example

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

带滚动的响应全屏图像

2 个答案: