React导航栏Logo窗口缩放比例失调问题求助

问题描述 #

调整浏览器窗口尺寸时，React项目导航栏内的Logo无法与其他元素保持比例协调。尝试过媒体查询适配小屏幕、将单位从px改为%，但问题仍未解决。

页面状态 #

• 正常显示状态：
  
• 窗口缩小后比例失调状态：
  

现有代码 #

Navbar.js #

import { Link } from "react-router-dom";

import navbarcss from "./Navbar.module.css";
import logo from "../../images/logo.jpg";
import login from "../../images/login.jpg";

function Navbar() {
  return (
    <header className={navbarcss.header}>
      <Link to="/home">
        <img className={navbarcss.logovillanueva} src={logo} alt="Logo" />
      </Link>
      <nav>
        <ul>
          <li>
            <Link to="/home">HOME</Link>
          </li>

          <li>
            <Link to="/about-us">ABOUT US</Link>
          </li>

          <li>
            <Link to="/firm">FIRM</Link>
          </li>

          <li>
            <Link to="/publications">PUBLICATIONS</Link>
          </li>

          <li>
            <Link to="/book-online">BOOK ONLINE</Link>
          </li>

          <li>
            <Link to="/login" style={{ display: "flex", alignItems: "center" }}>
              <img className={navbarcss.loginimg} src={login} alt="Login" />
              <span className={navbarcss.login}>Log In</span>
            </Link>
          </li>
        </ul>
      </nav>
    </header>
  );
}

export default Navbar;

Navbar.module.css #

.header {
  width: 100%;
  height: 6.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #554a58;
  padding: 0 5%;
}

.logovillanueva {
  width: 70%;
  height: auto;
  margin-left: 20%;
  display: flex;
}

.header ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  margin-right: 20rem;
  margin-left: 0;
  white-space: nowrap;
}

.header li {
  margin-left: 2rem;
}

.header a {
  text-decoration: none;
  font-size: 14.5px;
  color: white;
}

.header a:hover,
.header a:active,
.header a:active {
  color: #aa9fad;
}

.badge {
  background-color: #cc2062;
  color: white;
  border-radius: 12px;
  padding: 0 1rem;
  margin-left: 0.5rem;
}

.loginimg {
  width: 130%;
}

.login {
  color: #41bbbc;
}

.login:hover {
  color: #48999e;
}

解决方案 #

问题根源 #

1. Logo的width:70%基于父元素<Link>宽度，但父元素无宽度限制，缩放时父元素宽度变化导致Logo尺寸失控；
2. 导航列表的margin-right:20rem是固定大值，小屏幕下会挤压Logo空间；
3. 未给Logo设置尺寸上下限，缩放时比例无法维持。

修改步骤 #

1. 修复Logo尺寸控制

修改.logovillanueva样式，基于导航栏高度维持比例，同时限制最大宽度：

.logovillanueva {
  height: 80%; /* 基于导航栏固定高度，保证垂直比例协调 */
  width: auto; /* 自动维持图片原始比例 */
  max-width: 200px; /* 限制最大宽度，避免大屏幕过度拉伸 */
  margin-left: 0; /* 移除不必要的左外边距 */
}

2. 优化导航列表间距

替换固定大值外边距为自适应间距，避免挤压Logo：

.header ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  margin-right: 0; /* 移除固定大值右外边距 */
  gap: 1.5rem; /* 使用gap统一控制列表项间距，更灵活 */
  white-space: nowrap;
}

.header li {
  margin-left: 0; /* 移除列表项左外边距，改用ul的gap控制 */
}

3. 修复登录图标比例

给登录图标设置固定尺寸，避免拉伸变形：

.loginimg {
  width: 24px;
  height: 24px;
  margin-right: 0.5rem; /* 增加与文字的间距 */
}

4. 可选：小屏幕适配

如果小屏幕下导航项过于拥挤，添加媒体查询隐藏非核心项或调整样式：

@media (max-width: 900px) {
  /* 隐藏部分非核心导航项 */
  .header li:nth-child(2),
  .header li:nth-child(3),
  .header li:nth-child(4) {
    display: none;
  }
  /* 缩小导航文字尺寸 */
  .header a {
    font-size: 12px;
  }
}

内容的提问来源于stack exchange，提问作者Paris Vinuya