React应用中导航栏Logo自适应布局与优化实践

import consultin2 from '../../assets/logo/consultin2.png'; // 假设Logo图片路径

function Navbar() {
  return (
    <nav className="navbar">
      <div className="navbar-logo">
        <img src={consultin2} alt="ConsultIn Logo" />
      </div>
      {/* 其他导航链接或组件 */}
      <ul className="nav-links">
        <li><a href="#home">首页</a></li>
        <li><a href="#about">关于我们</a></li>
      </ul>
    </nav>
  );
}

export default Navbar;

.navbar {
    height: 60px; /* 设定导航栏的固定高度 */
    width: 100%;
    background-color: #f8f8f8;
    display: flex; /* 使用Flexbox辅助其他元素的布局 */
    align-items: center; /* 垂直居中所有子项 */
    padding: 0 20px;
    box-sizing: border-box; /* 确保padding不增加总宽度 */
}

.navbar-logo img {
    /* 关键：只设置高度，宽度自动调整以保持比例 */
    height: calc(100% - 10px); /* Logo高度为导航栏高度减去10px的上下边距 */
    width: auto; /* 自动调整宽度以保持原始比例 */
    display: block; /* 移除图片底部可能存在的空白 */
    max-height: 50px; /* 设定Logo的最大高度，防止过大 */
}

.navbar {
    position: relative; /* 为绝对定位的子元素提供定位上下文 */
    height: 60px;
    width: 100%;
    background-color: #f8f8f8;
    /* 为Logo预留左侧空间，避免Logo与其他内容重叠 */
    padding-left: 80px; 
    display: flex; /* 辅助其他导航项的布局 */
    align-items: center;
    box-sizing: border-box;
}

.navbar-logo {
    position: absolute;
    left: 0; /* 距离导航栏左侧0 */
    top: 0; /* 距离导航栏顶部0 */
    height: 100%; /* 让Logo容器占据导航栏的全部高度 */
    display: flex; /* 使用Flexbox在Logo容器内部垂直居中Logo */
    align-items: center;
    padding-left: 15px; /* Logo与左侧边缘的间距 */
}

.navbar-logo img {
    height: 80%; /* Logo实际高度占其容器的80% */
    width: auto; /* 自动调整宽度以保持比例 */
    display: block;
    max-height: 50px; /* 限制Logo的最大高度 */
}

import consultin2 from '../../assets/logo/consultin2.png';

function Navbar() {
  return (
    <nav className="navbar">
      <div className="navbar-logo">
        <img src={consultin2} alt="ConsultIn Logo" />
      </div>
      {/* 其他导航链接或组件可以包裹在一个div中，以便更好地控制布局 */}
      <div className="nav-items">
        <ul className="nav-links">
          <li><a href="#home">首页</a></li>
          <li><a href="#about">关于我们</a></li>
        </ul>
        <button className="contact-btn">联系我们</button>
      </div>
    </nav>
  );
}

export default Navbar;

.navbar {
    display: flex; /* 启用Flexbox布局 */
    justify-content: space-between; /* Logo在左侧，其他导航项在右侧 */
    align-items: center; /* 垂直居中所有子项 */
    height: 60px;
    width: 100%;
    background-color: #f8f8f8;
    padding: 0 20px; /* 导航栏左右内边距 */
    box-sizing: border-box;
}

.navbar-logo img {
    height: 40px; /* 直接设定Logo的高度 */
    width: auto; /* 自动调整宽度以保持比例 */
    display: block;
}

.nav-items {
    display: flex;
    align-items: center; /* 垂直居中导航项和按钮 */
}

.nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* 使链接水平排列 */
}

.nav-links li {
    margin-left: 20px; /* 链接之间的间距 */
}

.contact-btn {
    margin-left: 30px; /* 按钮与链接的间距 */
    /* 其他按钮样式 */
}