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

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 标签中使用 Logo 而不是背景，但如果是这样的话，请尝试提供 background-size:contain;背景重复:不重复；

希望对您有所帮助!