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

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

看起来正常吗

当我放大时它是什么样子的

你知道怎么解决这个问题吗

* { 保证金：0； 填充：0； 框大小：边框框； } img{ 最大宽度：100%； 高度：自动； } .集装箱{ 最大宽度：900px； 保证金：0自动； } 1.柱头{ 背景色：20cm； 背景图片：url../img2/header_background.png； 背景尺寸：封面； 背景位置：中心； 高度：60Vh； 文本对齐：居中； } .柱头h2{ 文本对齐：居中； 垫面：2米； 字号：800； 字体大小：1.7em； 颜色：172025 } .柱头h1{ 字号：92pt； 字号：900； 颜色：白色； 保证金：0； 边缘顶端：em； } .创始人{ 边缘顶部：-6em； } .箭头框{ 位置：相对位置； 背景：urlhttps://i.imgur.com/gp3z7z5.png 无重复中心； 背景尺寸：包含； 保证金：自动； 宽度：400px； 高度：自动； 边缘顶部：-3em； } .阿罗{ 位置：相对位置； 显示器：flex； 文字装饰：无； 对齐项目：居中； 证明内容：中心； 字体大小：1.7rem； 高度：80px； 颜色：黑色； } .dev说明{ 字号：1.4em； 字体大小：300； 线高：1.3em； } .认出{ 边缘顶端：3em； 文本转换：大写； 字号：700； } .图像{ 填充：1em； 显示：内联； 边缘顶部：2米； } .图片：悬停， .图像：聚焦{ 颜色：白色； } .img集装箱{ 边缘顶部：1.3em； } 丘巴图 你好我们是蒂尔德。 我们生活和呼吸代码。

我们是一个小型的开发团队，他们热衷于制作优秀的软件。 我们是Ember.js、RubyonRails、jQuery等背后的一些人。 我们在这里帮助您构建未来的产品和工具。

你可以在城里到处认出我们来

---

我想你可以这样做

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

---

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

在这个解决方案中，我们创建了一个.hero容器，并将所有应该放在蓝色背景前面的内容放在其中。我们绝对定位图像，从底部，将箭头向下变换50%

如果您遇到与另一个答案的硬编码高度有关的问题，那么这将对您有效

.英雄{ 背景色：20cm； 显示器：flex； 弯曲方向：立柱； 证明内容：中心； 对齐项目：居中； 填充：100px 0 200px； 位置：相对位置； 文本对齐：居中； } 1.预先阅读{ 字体大小：1.7em； 字号：800； 文本转换：大写； } .标题{ 颜色：fff； 字号：92pt； 字号：900； 文本转换：大写； } .人{ 位置：绝对位置； 底部：0； 左：50%； 转化：translateX-50%； } .阿罗{ 位置：绝对位置； 底部：0； 左：50%； 转换：翻译-50%，50%； } img{ 边框：1px纯黑； } 你好我们是蒂尔德。 我们生活和呼吸代码。

---

这是因为在浏览器中放大时，窗口高度会降低。你的蓝色容器有60vh，所以它也会减少。谢谢乔治，你知道如何改变它使它工作吗？我对CSS还是相当陌生。大约970px。然后。帖子标题{背景颜色：20CharStyle；背景图像：url../img2/header_background.png；背景大小：封面；背景位置：居中；高度：582px；文本对齐：居中；}我将你的帖子标题高度设置为582px。