Question

我是新来的，我希望有人可以帮助我。

我看过这个网站，并想知道是否有人可以帮助在CSS中做到这一点。我有一个标题，并在容器内部与内容。我没有得到的是即使在调整窗口大小后如何告诉图像始终填满屏幕以及如何在滚动时告诉内容显示。

调整窗口的高度和宽度并滚动，看看我的意思。我将不胜感激任何帮助。

欢呼和TIA

Sample Page

Answer 1

首先，您需要将文档的高度和宽度（body）设置为视口的高度（html），将两者都设置为100％并删除任何边距以确保内容填充可见空间。

然后，您需要创建第一个区域并为其指定background-image并使用background-size:cover和background-position:center center;，以便在调整窗口大小时响应大小。

任何后续的内容部分，也需要给出100％的高度和宽度，以便它们相对于可见区域进行缩放。

你可以使用，例如以下：

Demo Fiddle

HTML

<header></header>
<section>Content</section>

CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
}
header {
    background:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTQOrSSvhefLVAXo3OOoMGYGS232bfHFnZyA9Jk24KeefYuau8c);
    background-size:cover;
    background-position:center center;
}
header, section {
    height:100%;
}
section {
    background:lightgrey
}

Answer 2

您可以使用视口宽度和高度始终使图像填充窗口：

#YourImage {
    width:100vw;
    height:100vh;
}

设置视口元标记也是个好主意：

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

此外，将文档的边距和填充设置为零。

html, body {
    margin:0;
    padding:0;
}

希望这有帮助。

使用可滚动的全尺寸图像进行CSS定位

2 个答案:

Demo Fiddle