背景图像自动调整自身大小

Question

我设置了一个蓝色背景图像，添加了一些内容并完成了。 我试过放大网站，每当我放大时，背景图像会自动向上推，不会覆盖黄色箭头的创始人和一半。

平时的样子

放大时的样子

关于如何解决这个问题的任何想法？

 * { margin: 0; padding: 0; box-sizing: border-box; } img { max-width: 100%; height: auto; }.container { max-width: 900px; margin: 0 auto; }.post-header { background-color: #20cfcf; background-image: url("../img2/header_background.png"); background-size: cover; background-position: center center; height: 60Vh; text-align: center; }.post-header h2 { text-align: center; padding-top: 2em; font-weight: 800; font-size: 1.7em; color: #172025 }.post-header h1 { font-size: 92pt; font-weight: 900; color: white; margin: 0; margin-top: em; }.founders { margin-top: -6em; }.arrow-box { position: relative; background: url("https://i.imgur.com/gp3z7z5.png") no-repeat center center; background-size: contain; margin: auto; width: 400px; height: auto; margin-top: -3em; }.arrow { position: relative; display: flex; text-decoration: none; align-items: center; justify-content: center; font-size:1.7rem; height:80px; color: black; }.dev-description { font-size: 1.4em; font-weight: 300; line-height: 1.3em; }.recognize { margin-top: 3em; text-transform: uppercase; font-weight: 700; }.images { padding: 1em; display: inline; margin-top: 2em; }.images:hover, .images:focus { color: white; }.img-container { margin-top: 1.3em; }

 <section class="post-header"> <div class="wrapper"> CHYBA TU <h2>HI. WE'RE TILDE.</h2> <h1>WE LIVE AND <br> BREATHE CODE.</h1> <img src="img2/founders.png" class="founders" height="294px" width=425px alt=""> <div class="arrow-box"> <a href="#" class="arrow">Meet the team</a> </div> <div class="container"> <p class="dev-description"> We're a small team of developers who are passionate about crafting great software. We're some of the faces behind Ember.js, Ruby on Rails, jQuery and more. <br> We're here to help you build the products and tools of the future. </p> <p class="recognize"> you may recognize us from around town </p> <div class="img-container"> <div class="images"> <img src="img2/rails.png" alt=""> </div> <div class="images"> <a href=""><img src="img2/jquery.png" alt=""></a> </div> <div class="images"> <a href=""><img src="img2/ember.png" alt=""></a> </div> <div class="images"> <a href=""><img src="img2/handlebars.png" alt=""></a> </div> <div class="images"></div> <a href=""><img src="img2/bundler.png" alt=""></a> </div> </div> </div> </div> </section>

提前致谢。 如果有什么不清楚的地方，请告诉我。

Answer 1

我认为你可以这样做。

.post-header {
    background-color: #20cfcf;
    background-image:
    url("../img2/header_background.png");
    background-size: cover;
    background-position: center center;
    height: 582px;
    text-align: center;
}

Answer 2

另一种解决方案是调整英雄的标记，使人物和箭头图像位于背景的底部，这意味着它将适用于移动/桌面以及所有高度、宽度和缩放级别。

在这个解决方案中，我们创建了一个.hero容器，并将所有要放在蓝色背景前面的东西都放在里面。 我们 position 图像绝对，从底部开始，将箭头向下变换 50%。

如果您遇到其他答案的硬编码高度问题，那么这对您有用。

 .hero { background-color: #20cfcf; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 100px 0 200px; position: relative; text-align: center; }.preheading { font-size: 1.7em; font-weight: 800; text-transform: uppercase; }.heading { color: #fff; font-size: 92pt; font-weight: 900; text-transform: uppercase; }.people { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }.arrow { position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%); } img { border: 1px solid black; }

 <div class="hero"> <div class="preheading">Hi. We're Tilde.</div> <div class="heading">We live and<br>breate code.</div> <img class="people" src="https://via.placeholder.com/400x300"> <img class="arrow" src="https://via.placeholder.com/200x80"> </div>