如何确保我的标题图片在所有高度和宽度上都可以响应？

Question

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

@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>

CSS：

.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;
    }
  }
}

我知道我在编写媒体查询时也可以使用max-height属性，但是对于许多媒体查询来说，这似乎已经过头了。 我在做什么错的CSS专家:)？

Answer 1

我建议将徽标放在img标签而不是背景中，但是如果是这样，则尝试给出background-size:contain; background-repeat:no-repeat; background-size:contain; background-repeat:no-repeat;

希望这可以帮助 ！