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

Question

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

我进一步了解它并注意到背景图像附在身体标签上。我也注意到身体似乎从里面的表单元素中获得了它的大小，这意味着身体本身实际上比整个页面短。

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

Answer 1

我认为你正在寻找这个部分：

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

Answer 2

此外，身高设置为视口的100％。