Question

基本上，我想在我的网站上放一个大横幅，一旦你登陆页面就会填满浏览器，无论浏览器窗口大小如何。如果调整浏览器窗口的大小，横幅应该能够适应并仍然能够填充浏览器窗口。横幅的宽高比将保持不变，在调整浏览器窗口大小时不会拉伸或缩小图像。

我是网络开发的新手，我只想知道实现这一目标需要哪些工具？任何初始代码都将受到高度赞赏。感谢

与Spotify的网站横幅非常相似的东西。 https://www.spotify.com/ca-en/

编辑这就是我现在拥有的，它并不多

#header_image_div{
    width: 100%;
    position: absolute;
    top: 0px;
    z-index: -1;
}
#header_image{
    width: 100%;
}

Answer 1

    html {
        background: url(path to image file) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

尝试使用上面的css声明，它将覆盖完整的浏览器窗口并避免拉伸背景图像

如何制作横幅全屏？并适应浏览器大小

1 个答案: