Css 如何使图像为全宽，并为较小的浏览器自动调整大小？

在我试图使顶部的矩形图像是全宽的。我试着给它几个不同的属性，但最接近我想要的效果是：

.dla-ciebie__services .dlaciebie-header-image {
    background-image: url(images/dla-ciebie/dlaciebie-1600.jpg);
    background-size: contain;
    background-position-y: top;
    background-repeat: no-repeat;
    width: 100vw;
    min-height: 100vh;
}

以下是包含此元素和下一个块的HTML：

<div class="dla-ciebie">
    <section class="dla-ciebie__services">
        <div class="dlaciebie-header-image"></div>
        <em class="services-intro">Chcę powiedzieć Ci coś bardzo ważnego...<br>nie urodziłaś się po to, by żyć nieświadomie, w bólu i z dużym bagażem zmartwień. Jesteś tu dlatego, że masz w sobie <strong>ogromną siłę, która czeka, aż pozwolisz jej udowodnić swoją moc!</strong>
        </em>
        <div class="services-background">

}

这里我不能在px中给出一个静态高度，因为如果我给它一个静态高度，在较小的浏览器上，图像会改变它的比例

同时，我所做的也不好，因为它在图像下方添加了一些空白。 如果缩短浏览器窗口的宽度，您将看到图像下方的空白增加了多少

我想请您帮助解决这个问题（如果可能的话，请避免使用JS解决方案）。我尝试了不同的教程，但似乎该网站是如何构建的，其他教程似乎不适用，因此我认为需要一个特定的解决方案，以这个页面

提前感谢。

不要将

作为图像添加到

背景图像中。相反，请使用

ChcępowiedziećCi cośbardzo ważnego…
nie urodziśaśsiępo to，作者：żyćnieświadomie，w bólu i z du ym bagażem zmartwież。杰斯特·德拉特戈，马斯·沃索比，克托拉·泽卡，一个波兹沃利斯·杰杰·乌多沃德尼·斯沃伊莫克

不要将
背景图像添加到图像中，从而将其用作图像。相反，请使用

ChcępowiedziećCi cośbardzo ważnego…
nie urodziśaśsiępo to，作者：żyćnieświadomie，w bólu i z du ym bagażem zmartwież。杰斯特·德拉特戈，马斯·沃索比，克托拉·泽卡，一个波兹沃利斯·杰杰·乌多沃德尼·斯沃伊莫克

你能把那个图像的HTML代码放进去吗？在你的网站上似乎是全幅的。请在图片下包含元素的HTML和CSS代码（因为有空格）。我刚刚添加了所需的代码。你可以把图片的HTML代码放进去吗？在你的网站上似乎是全幅的。请在图片下包含元素的HTML和CSS代码（因为有空格），我刚刚添加了所需的代码
.dla-ciebie__services {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  margin-top: 40px;
  .dlaciebie-header-image {
    background-image: url(images/dla-ciebie/dlaciebie-1600.jpg);
    background-size: contain;
    background-position-y: top;
    background-repeat: no-repeat;
    width: 100vw;
    /* height: 289px; */
    min-height: 100vh;
  }
  .services-intro {
    font: 40px/60px "Libre Baskerville";
    color: $bluedark;
    width: 60%;
    text-align: center;
    br {
      margin: 0;
    }
    strong {
      font-weight: bold;
    }

    @media (max-width: 900px) {
      width: 88%;
      font-size: 28px;
      line-height: 54px;
    }
    @media (max-width: 500px) {
      font-size: 18px;
      line-height: 32px;
    }
  }
  .services-background {
    background-image: url("images/blue-painting-1200.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 80px;
    width: 100%;
  }