Html 如何确保我的标题图像对所有高度和宽度都有响应？

目前，我的媒体查询设置如下：

@mixin respond($breakpoint) {
    @if $breakpoint == phone {
        @media only screen and (max-width: 37.5em) { @content };    //max 600px
    }
    @if $breakpoint == tab-port {
        @media only screen and (max-width: 56.25em) { @content };     // max 900px
    }
    @if $breakpoint == tab-land {
        @media only screen and (max-width: 75em) { @content };    // max 1200px
    }

    @if $breakpoint == medium-desktop {
        @media only screen and (max-width: 93.75em) { @content };    // max 1500px
    }

    @if $breakpoint == desktop {
        @media only screen and (max-width: 112.5em) { @content };    //max 1800px
    }

    @if $breakpoint == big-desktop {
        @media only screen and (min-width: 125em) { @content };    //min width 2000px
    }
}

我很难让我的标题图像在不同高度的屏幕尺寸上响应。虽然我的标题看起来像是我为标题图像设置的这些媒体查询所需要的，但在某些笔记本电脑上它仍然看起来很糟糕，即使我在使标题图像响应的同时也调整了浏览器高度

以下是我的标题图像的HTML：

<header class="header">
      <div class="header__logo-box"></div>

      <nav class="navigation">
        <ul class="navigation__list">
          <li class="navigation__item"><a href="#" class="navigation__link navigation__link--highlighted js--scroll-to-services">Teenused</a></li>
          <li class="navigation__item"><a href="#" class="navigation__link js--scroll-to-about">Meist</a></li>
          <li class="navigation__item"><a href="#" class="navigation__link js--scroll-to-contact">Kontakt</a></li>
        </ul>
      </nav>

      <div class="header__image-box">
        &nbsp;
      </div>
    </header>

我知道我在编写媒体查询时也可以使用max-height属性，但对于这么多的媒体查询来说，这已经是一种过度使用了。

---

我做错什么了CSS专家：）

我建议在img标签中使用logo，而不是背景，但如果是这样的话，请尝试给出

背景尺寸：contain；背景重复：无重复

希望这有帮助

.header {
  height: 29vh;
  box-shadow: 0 .7rem 4rem rgba(0,0,0,0.2);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  overflow: hidden;

  &__logo-box {
    position: absolute;
    background-image: url('./../img/logo.png');
    height: 35%;
    width: 22%;
    background-size: contain;
    background-repeat: no-repeat;
    bottom: 27%;
    left: 21%;

    @include respond (desktop) {
      width: 27%;
      left: 17%;
    }

    @include respond (medium-desktop) {
      width: 30%;
      left: 7%;
    }

    @include respond(tab-land) {
      height: 40%;
      width: 33%;
      left: 8%;
    }

    @include respond(tab-port) {
      height: 40%;
      width: 33%;
      left: 8%;
    }

    @include respond(phone) {
      height: 50%;
      width: 70%;
      left: 15%;

    }
  }

  &__image-box {
    height: 100%;
    width: 100%;
    position: absolute;
    background-image: url('./../img/3lehte-3.png');
    background-repeat: no-repeat;
    left: 60%;
    background-size: 25%;

    @include respond (desktop) {
      background-size: 23%;
      left: 64%;
    }

    @include respond (medium-desktop) {
      background-size: 20%;
      left: 65%;
    }

    @include respond(tab-land) {
      background-size: 25%;
      left: 50%;
    }

    @include respond(tab-port) {
      background-size: 33%;
      left: 48%;
    }

    @include respond(phone) {
      // background-size: 45%;
      // left: 45%;
      display: none;
    }
  }
}