html - 带滚动条的响应式全屏图像

Question

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

我已经看到并试过了……它有效:Full page background image with vertical scrolling

但我主要担心两个问题:

1. 通过这种方法，我必须对图像下方的每个部分使用 position: absolute(我将至少有 4-5 个不同的内容部分)。这是正确的做法吗？

2. 这个方法好像没有响应，请问有办法吗？

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" />


支持所有屏幕尺寸。