错误行为响应背景图像

Question

这是我第一次做一个学校项目，我需要让我的网站响应。我遵循"移动优先"。在stackoverflow上，我复制了一种使背景图像响应的好方法：

background-image: url(./assets/img/bg-blue-sm.png); background-repeat: no-repeat; background-size: cover; background-position: center;

但是，当我放大屏幕尺寸时，它们表现得非常奇怪。我该如何解决这个问题？您可以在此处看到行为：https://i.stack.imgur.com/qVk9T.jpg

.container {
  display: inline-block;
  cursor: pointer;
  background-color: var(--beige);
  border-radius: 100%;
  padding: 2rem;
}
.bar1,
.bar2,
.bar3 {
  width: 35px;
  height: 5px;
  background-color: var(--pink);
  margin: 6px 0;
  transition: .4s;
  border-radius: 1rem;
}
.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
  opacity: 0;
}
.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}
.navigatie {
  text-transform: uppercase;
  font-family: 'Abrade Heavy';
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-image: url(./assets/img/nav-sm.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding: 1rem .5rem;
}
.navigatie li:nth-child(2) {
  margin-top: -2rem;
}
a {
  text-decoration: none;
  list-style: none;
  color: var(--beige);
}
.header {
  background-image: url(./assets/img/header-bg-sm.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 40rem;
  padding-top: 8rem;
  margin-top: -7rem;
}
.hide {
  display: none;
}
.date {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 10rem;
  margin-top: 2rem;
}
.date-txt {
  font-family: 'Abrade Heavy';
  text-transform: uppercase;
  color: #b3b3b3;
  font-size: 1.5rem;
  margin: 0;
}
.intro-article {
  background-image: url(./assets/img/bg-blue-sm.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 40rem;
  margin-top: -11rem;
  padding-top: 8rem;
}

<header>
            <ul class="navigatie">
              <li><a href=""><img src="./assets/img/logo-sm.png" alt=""></a></li>
              <li><a href="">programmatie</a></li>
              <li>
                  <div class="container" onclick="myFunction(this)">
                      <div class="bar1"></div>
                      <div class="bar2"></div>
                      <div class="bar3"></div>
                    </div>
              </li>
            </ul>
              <div class="header">
                  <h1 class="hide">INTERNATIONAAL STRAATTHEATER</h1>
                  <img src="./assets/img/titel.png" alt="IBS header background">
                  <div class="date">
                      <p class="date-txt">alle ogen gericht op</p>
                      <img src="./assets/img/datums-sm.png" alt="VRIJ 24/08 ZAT 25/08 ZO 26/08">
                  </div>
              </div>
          </header>
          <main>
            <article class="intro-article">
              <h2 class="hide">een wereld vol fantasie</h2>
              <img src="./assets/img/wereld-sm.png" alt="Een wereld vol fantasie">
              <p class="intro-txt">Een arsenaal aan gekke wezens of vriendelijke gastheren nodigen u nu al uit op een weekend vol verwondering en bewondering. Een combinatie van walking acts en tentoonstellingen zorgen voor een onvergetelijke ervaring.</p>
            </article>
          </main>

Answer 1

这是

cover的工作方式。

cover 告诉浏览器确保图像始终覆盖整个容器，即使它必须拉伸图像或从其中一个边缘切掉一点点。 - CSS技巧

在您加宽屏幕的情况下，图像会尝试通过从高度剪切来覆盖整个宽度。

检查我为background-size属性的其他值提供的链接，以找到适合您需要的值。