React项目中导航栏Logo自适应布局：避免裁剪与布局溢出

/* Navbar 样式 */
.navbar {
    display: flex; /* 配合其他导航项 */
    align-items: center;
    height: 60px; /* 设定导航栏固定高度 */
    width: 100%;
    background-color: #f8f8f8;
    padding: 0 20px; /* 左右内边距 */
    box-sizing: border-box; /* 确保padding不增加总宽度 */
}

/* Logo 容器样式 */
.navbar-logo {
    height: 100%; /* Logo容器高度与导航栏相同 */
    display: flex;
    align-items: center;
    /* 宽度可以根据Logo实际宽度调整，或者使用max-width */
}

/* Logo 图像样式 */
.navbar-logo img {
    height: calc(100% - 10px); /* Logo高度为容器高度减去上下各5px的间距 */
    width: auto; /* 宽度自适应，保持宽高比 */
    max-height: 50px; /* 限制Logo的最大高度 */
    display: block; /* 移除图片底部可能存在的额外空间 */
}

// React 组件中的 JSX
import consultin2 from '../../assets/logo/consultin2.png';

function NavbarComponent() {
  return (
    <nav className="navbar">
      <div className="navbar-logo">
        <img src={consultin2} alt="ConsultIn" />
      </div>
      {/* 其他导航项 */}
      <div className="nav-items">
        {/* ... */}
      </div>
    </nav>
  );
}

/* Navbar 样式 */
.navbar {
    position: relative; /* 关键：作为绝对定位元素的参照物 */
    height: 60px; /* 设定导航栏高度 */
    background-color: #f8f8f8;
    padding-left: 80px; /* 为Logo预留空间，避免内容重叠 */
    /* 其他 flexbox 或 grid 布局属性，如果需要 */
}

/* Logo 容器样式 */
.navbar-logo {
    position: absolute; /* 关键：绝对定位 */
    top: 0;
    bottom: 0;
    left: 0; /* 贴合导航栏左侧 */
    margin: auto 0; /* 垂直居中 */
    height: 100%; /* 允许Logo容器占据导航栏的完整高度 */
    display: flex; /* 确保内部Logo图像可以居中 */
    align-items: center; /* 垂直居中Logo图像 */
    padding-left: 15px; /* Logo与导航栏左侧的间距 */
    width: 70px; /* 为Logo容器设置一个固定宽度 */
}

/* Logo 图像样式 */
.navbar-logo img {
    max-height: 80%; /* Logo最大高度为容器的80% */
    width: auto; /* 宽度自适应，保持宽高比 */
    display: block;
}

// React 组件中的 JSX
import consultin2 from '../../assets/logo/consultin2.png';

function NavbarComponent() {
  return (
    <nav className="navbar">
      <div className="navbar-logo">
        <img src={consultin2} alt="ConsultIn" />
      </div>
      {/* 将其他导航项包裹在一个 div 中，方便 Flexbox 布局 */}
      <div className="nav-items">
        <ul>
          <li><a href="#">首页</a></li>
          <li><a href="#">产品</a></li>
          <li><a href="#">关于我们</a></li>
        </ul>
      </div>
    </nav>
  );
}

/* Navbar 样式 */
.navbar {
    display: flex; /* 关键：启用 Flexbox */
    justify-content: space-between; /* Logo 在左，其他项在右 */
    align-items: center; /* 垂直居中所有子项 */
    height: 60px; /* 设定导航栏高度 */
    background-color: #f8f8f8;
    padding: 0 20px; /* 左右内边距 */
    box-sizing: border-box;
}

/* Logo 容器样式 */
.navbar-logo {
    /* Flexbox 默认会将其推到最左侧 */
    margin-right: 20px; /* Logo与下一个元素的间距 */
    display: flex; /* 确保内部Logo图像可以居中 */
    align-items: center; /* 垂直居中Logo图像 */
    height: 100%; /* Logo容器高度与导航栏相同 */
}

/* Logo 图像样式 */
.navbar-logo img {
    max-height: 80%; /* Logo最大高度为容器的80% */
    width: auto; /* 宽度自适应，保持宽高比 */
    display: block;
}

/* 其他导航项容器样式 */
.nav-items ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* 使列表项水平排列 */
}

.nav-items li {
    margin-left: 20px;
}