带有滚动的响应式全屏图像答案

【问题标题】：Responsive fullscreen image with scroll带有滚动的响应式全屏图像
【发布时间】：2014-01-28 00:44:16
【问题描述】：

我希望当用户访问我的网站时只能看到一张图片（100% 宽度），并且当他向下滚动以查看网站的其余部分时。

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

但我有两个主要担心：

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

【问题讨论】：

你的意思是像this这样的东西吗？
可以，但是宽度和高度必须是100%
你试过html, body { width: 100%; height: 100%; }吗？然后在每个部分中添加类似 .myDiv { width: 100%; height: 100% } 的内容，这将是整个视口。

标签： html css responsive-design

【解决方案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" />

支持所有屏幕尺寸。

【讨论】：

谢谢，我试过了，一般都可以。问题是图像变得有点大，屏幕和滚动条显示出来，我不希望这样。有没有办法去掉？
你在img css中试过overflow: hidden吗？无论如何，在这种结构中它不应该发生。您是否将填充和边距设置为0？你把img边框设置为0了吗？
知道了，问题来了，因为 div class="image" 在我的代码中的部分（此标签没有任何样式）标签中。当我删除该部分时，滚动条消失了，但我不知道为什么这个问题首先出现。溢出：隐藏；好像不行，边距、内边距和边框都是0
我刚刚添加了 height: 100%;到 section 标签，现在可以正常工作了。感谢您的支持:)

【解决方案2】：

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

这样，图像将 100% 成为 height 和 width 并且不会与内容混淆。

【讨论】：