html - 调整大小以创建视口大小的背景图像

Question

我今天在看 path.com，很喜欢他们实现的动态大小的封面照片。如果您检查它，您会发现无论您的屏幕尺寸如何，它的尺寸都很好。

我仔细看了看，发现背景图片附在了 body 标签上。我还注意到正文似乎是从其中的表单元素中获取大小的，这意味着正文本身实际上比整个页面短。

有谁知道他们是如何做到这一点的？

Answer 1

此外，身体高度设置为视口的 100%。

Answer 2

我认为您正在寻找这部分：

body.home {
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}