当我调整浏览器窗口窗口大小时，我的导航栏徽标组件发生变化

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

fit ：包含到 .navbar_logo 类。每次缩小窗口时，这都会重塑徽标。告诉我进展如何

Answer 2

我删除了你的回购并解决了这个问题。该问题是由绝对定位和使用变换引起的。虽然这些都很好，但它们会将项目从文档流中取出。当您将它们从 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%。