當我調整瀏覽器窗口窗口大小時，我的導航欄徽標組件會發生變化

Question

每當我縮小瀏覽器窗口時，我的徽標就會發生變化。 我不確定是什么原因導致我在下面附上了我的jsx和css代碼。 我嘗試更改寬度值，但無論其屬性如何，它都會發生變化。 我現在無法提供圖像，因為堆棧溢出不允許我，但如果需要或其他什么，我可以嘗試 DM 它們。 謝謝！

jsx代碼

  return (
    <>
      <nav className="navbar">
        <div className="navbar-container container">
          <Link className="navbar-logo" onClick={closeMobileMenu}>
            <img className='navbar-icon'
              src={Icon} alt='icon'
              width='auto'
              height='60px'
              position='flex' />
            SKYPRECISION
          </Link>
          <div className="menu-icon" onClick={handleClick}>
            {click ? <FaTimes /> : <FaBars />}
          </div>
          <ul className={click ? 'nav-menu active' : 'nav-menu'}>
              <li className='nav-item'>
                <Link to='/' className='nav-links' onClick={closeMobileMenu}>
                  Home
                </Link>
              </li>
              <li className='nav-item'>
                <Link
                  to='/services'
                  className='nav-links'
                  onClick={closeMobileMenu}
                >
                  About
                </Link>
              </li>
              <li className='nav-item'>
                <Link
                  to='/products'
                  className='nav-links'
                  onClick={closeMobileMenu}
                >
                  Team
                </Link>
              </li>
              <li className='nav-btn'>
                {button ? (
                  <Link to='/sign-up' className='btn-link'>
                    <Button buttonStyle='btn-outline'>LOG-IN</Button>
                  </Link>
                ) : (
                  <Link to='/sign-up' className='btn-link'>
                    <Button
                      buttonStyle='btn-outline'
                      buttonSize='btn-mobile'
                      onClick={closeMobileMenu}
                    >
                      LOG-IN
                    </Button>
                  </Link>
                )}
              </li>
            </ul>
        </div>
      </nav>
    </>
  )

css代碼

/* Colors
    #009444 - light green
    #006838 - dark green
    #46639f - purple
*/

.navbar {
  background: #46639f;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  position: sticky;
  top: 0;
  z-index: 999;
}

.navbar-container {
  display: flex;
  justify-content: space-between;
  height: 80px;
}

.container {
  z-index: 1;
  width: 100%;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 50px;
  padding-left: 50px;
}

.navbar-logo {
  color: #009444;
  justify-self: start;
  cursor: pointer;
  text-decoration: none;
  font-size: 2rem;
  display: flex;
  align-items: center;
  position: auto;
  object-fit: contain;
}

.navbar-icon {
  margin-right: 0.5rem;
}

.nav-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  text-align: center;
  justify-content: end;
}

.nav-item {
  height: 80px;
  border-bottom: 2px solid transparent;
}

.nav-item:hover {
  border-bottom: 3px solid #009444;
}

.nav-links {
  color: #fff;
  display: flex;
  align-items: center;
  text-decoration: none;
  padding: 0.5rem 1rem;
  height: 100%;
}

.fa-bars {
  color: #fff;
}

.menu-icon {
  display: none;
}

@media screen and (max-width: 1300px) {
  .NavbarItems {
    position: relative;
  }

  .nav-menu {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 90vh;
    position: absolute;
    top: 80px;
    left: -100%;
    opacity: 1;
    transition: all 0.5s ease;
  }

  .nav-menu.active {
    background: #1c2237;
    left: 0;
    opacity: 1;
    transition: all 0.6s ease;
    z-index: 1;
  }

  .nav-links {
    text-align: center;
    padding: 2rem;
    width: 100%;
    display: table;
  }

  .nav-links:hover {
    color: #f00946;
    transform: scale(1.2);
    transition: all 0.3s ease;
  }

  .nav-item:hover {
    border: none;
  }

  .nav-item {
    width: 100%;
  }

  .navbar-logo {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(25%, 50%);
  }

  .menu-icon {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(-100%, 60%);
    font-size: 1.8rem;
    cursor: pointer;
  }

  .fa-times {
    color: #fff;
    font-size: 2rem;
  }

  .nav-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 120px;
  }
}

Answer 1

我拉下了你的回購並解決了這個問題。 問題是由絕對定位和使用變換引起的。 雖然這些都很好，但它們會將項目從文檔流中移除。 當您將它們從 DOM 流中取出時。 這就是導致轉變的原因。

這是解決問題所需的 CSS。 這不是 CSS 的全部，只是需要更改的部分。

.navbar {
    align-items: center;
    background: #46639f;
    height: 80px;
    display: flex;
    justify-content: center;
    position: sticky;
    top: 0;
    z-index: 999;
}
.container {
    margin-right: auto;
    margin-left: auto;
    max-width: 100%;
    padding-right: 50px;
    padding-left: 50px;
    width: 100%;
}
.navbar-container {
    align-items: center;
    display: flex;
    height: 80px;
    justify-content: space-between;
}
.navbar-logo {
    align-items: center;
    color: #009444;
    display: flex;
    text-decoration: none;
}
.navbar-icon {
    margin-right: 0.5rem;
    object-fit: contain;
    width: auto;
    height: 60px;
}


/* The styles for .navbar-logo in the media query are unneeded. Please remove them. */
@media screen and (max-width: 1300px) {
  .menu-icon {
    cursor: pointer;
    display: block;
    height: 1.8rem;
    width: 1.8rem;
  }
}

此外，SVG 徽標的高度和寬度值應從1em更改為100% 。

Answer 2

fit ：包含到 .navbar_logo 類。每次縮小窗口時，這都會重新塑造徽標。 讓我知道事情的后續