如何正确使我的英雄图像/横幅图像响应？

Question

当前正在尝试将图像添加到“标题”部分。很快，我们必须使网站具有响应能力，并且当调整浏览器窗口的大小时，我目前正在努力调整整个图片的大小。

当我使用background-size: cover;时，调整大小将剪切掉很多图像。使用background-size: 100%;时，它将留下一个巨大的“下巴”，它仅在页面按钮下方添加了空白，仅是背景色+它将被挤压到标题中（标题是固定的。）

不要介意标题内容本身。做出回应，将在未来完成

有没有办法可以解决这个问题？

CSS

hero-image {
    background-image: url(/img/header-background.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
    overflow:hidden;
    width: 100%;
}

#page-header {
    height: 100vh;
    background-color: #1c1b39;
    color: #ffffff;
}

#page-header h1 {
    padding-top: 15%;
    font-size: 3em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

#page-header p {
    padding-top: 1%;
    font-size: 1.5em;
    max-width: 780px;
    margin: 0 auto;
    opacity: 0.5;

}

button {
    margin-top: 5%;
    border-radius: 30px;
    width: 300px;
    height: 60px;
    text-transform: uppercase;
    font-size: 1.5em;
}

#button-reserve, #button-trailer:hover {
    background-color: #ff4242;
}

#button-reserve:hover, #button-trailer{
    background-color: inherit;
    border: 5px solid #ff4242;
    color: #ff4242;
}

#button-reserve:hover, #button-trailer:hover{
    transition: 0.5s;
}

#button-reserve {
    color: #ffffff;
    border-style: none;
}

#button-trailer:hover {
    color: #ffffff;
}

html

            <section id="page-header" class="hero-image">

                <h1>Buitenaards leuk: Coderen!</h1>
                <p>Op een leuke en speelse manier de vaardigheden van de toekomst ontdekken. Ideaal voor het basisonderwijs</p>

                <button id="button-reserve">Reserveer workshop</button>
                <button id="button-trailer">Bekijk trailer</button>

            </section>

Answer 1

快速浏览一下，您是否考虑过使用background-size: contain;而不是掩护？

这将使背景具有响应性，但确实有局限性。

Answer 2

使用background-size: cover;将调整背景图片的大小，以确保元素被完全覆盖。将其拉伸以使其自上而下。根据图像的尺寸，这可能只显示图像的一部分，而不是全部。

但是使用background-size: contain;会调整背景图像的大小，以确保其完全可见。

因此下面的代码将使您的图像具有响应性，但不会覆盖视口的整个高度。

.hero-image {
    background-image: url(/img/header-background.jpeg);
    background-size: contain;
    background-repeat: no-repeat;
    overflow:hidden;
    max-width: 100%;
}

但是如果您不想使用background-color，可以将background-repeat: repeat-y;设置为图像的背景

编辑：不要在CSS中将hero-image改成.hero-image。