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

-5

本质上，我希望在网站上放置一个大横幅，无论浏览器窗口大小如何，只要登陆页面就能填充浏览器。如果浏览器窗口被调整大小，横幅应该能够适应并且仍然能够填充浏览器窗口。横幅宽高比将保持不变，在调整浏览器窗口大小时不会拉伸或缩小图像。如何制作横幅全屏？并适应浏览器大小

我是网络开发新手，我只想知道我需要什么工具来实现这个目标？任何初始代码将高度赞赏。谢谢

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

编辑这是我现在，它没有太大的

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

来源

2015-09-08 John Parker

你能告诉你迄今为止编写的代码的例子吗？ – QuantumLicht

有很多关于如何使元素响应的教程 – charlietfl

我认为这可能是你正在寻找的

body{ margin:0px 0px; } 
 

 
#hero{ 
 
    background-image:url(https://chrisaam.files.wordpress.com/2015/03/wallpaper-2846361.jpg); 
 
    background-size:cover; 
 
    position:relative; 
 
    height:100vh; 
 
} 
 

 
.header{ 
 
    position:absolute; 
 
    top:50%; 
 
    text-align:center; 
 
    width:100%; 
 
    color:#fff; 
 
    font-size:36px; 
 
    -ms-transform: translate(0,-50%); /* IE 9 */ 
 
    \t -webkit-transform: translate(0,-50%); /* Safari */ 
 
    transform: translate(0,-50%); 
 

 
} 
 

 
#content{ 
 
    padding:100px 50px; 
 
    text-align:center; 
 
    width:80%; 
 
    margin:0px auto; 
 
} 
 

 
#content h2{ 
 
    margin:0px 0px 30px 0px; 
 
} 
 

 
#footer{ 
 
    padding:30px 0px; 
 
    text-align:center; 
 
    background:#ddd; 
 
}

<div id="wrapper"> 
 
    <div id="hero"> 
 
    <div class="header"> 
 
     <h1> Fullscreen Hero image </h1> 
 
    </div> 
 
    </div> 
 
    <div id="content"> 
 
    <h2> If nothing goes right for you , go left.</h2> 
 
    <p> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p> 
 
    </div> 
 
    <div id="footer"> 
 
    <p> I am the footer, and you have scroll down to see me.</p> 
 
    </div> 
 
</div>

来源

2015-09-09 05:01:35

非常感谢，非常感谢 –

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声明将覆盖整个浏览器窗口，并会避免拉伸的背景图片

来源

2015-09-08 23:46:04

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

回答

相关问题