直接改.navbar-brand img的width和height: auto即可，Bootstrap 5默认不限制Logo尺寸；问题多源于样式层级不足、容器未收缩或误判Logo实现方式（img/background-image/字体图标）。
直接改 .navbar-brand img 的 width 和 height: auto 就行，Bootstrap 5 默认不限制 Logo 尺寸，问题通常出在样式作用层级、容器未收缩或图片类型误判上。
确认 Logo 是 <img> 还是 background-image
打开开发者工具，点中 Logo 区域看 DOM 结构：
- 如果是
<img src="logo.svg">，就该调.navbar-brand img的宽高 - 如果是
<div class="logo">且 CSS 里有background-image，那width/height完全无效，得用background-size: contain或100% auto - 如果是字体图标（如
<i class="bi bi-bootstrap"></i>），就该调font-size，不是图片尺寸
.navbar-brand img 设宽高后仍变形或不生效
常见于 SVG 或比例敏感的图片。直接写 width: 120px; height: 40px; 会强制拉伸：
- 优先用
width: 120px; height: auto;，保持原始宽高比 - 检查 SVG 源文件是否带合理
viewBox（例如viewBox="0 0 240 60"），否则height: auto可能计算失准 - 删掉
.navbar-brand上多余的line-height或padding，它们会干扰垂直居中；可加line-height: 1;重置 - 避免给
.navbar-brand设min-height，它会撑高容器，让小 Logo 上下留白
为什么只调 <img> 尺寸，右侧导航项却没左移？
因为 .navbar-brand 是弹性容器，默认“包裹内容”，你缩了图片，但父容器尺寸没变，空白还在：
立即学习“前端免费学习笔记（深入）”；
- 正确做法是把尺寸控制逻辑上移到
.navbar-brand层，再让图片填满它：.navbar-brand {<br> width: 30%; /* 按需设，比如 120px / 4rem */<br> padding: 0;<br> overflow: hidden;<br>}<br>.navbar-brand img {<br> width: 100%;<br> height: auto;<br> display: block;<br>} - 同时注释掉原有作用于
.logo类的独立尺寸规则（如.logo { width: 50%; }），避免冲突 - 若需响应式，用媒体查询调
.navbar-brand宽度更稳：@media (max-width: 768px) {<br> .navbar-brand { width: 25%; }<br>}
移动端折叠后 Logo 突然变小或错位
这不是 Logo 缩放失效，而是 .navbar-collapse.show 的 max-height 动画估算不足，导致整个折叠区域被截断：
- 临时测试：加
.navbar-collapse.show { max-height: 120vh !important; }，看是否恢复 - 别用
max-height: none，它会让 CSS 过渡动画失效 - 检查
@media (max-width: 991.98px)下的.navbar-brand样式是否被覆盖——Bootstrap 5 断点是991.98px，不是992px - 如果用了
fixed-top，记得同步给body加padding-top，否则 Logo 视觉上像“陷进去了”
真正麻烦的不是怎么调大小，而是你根本不知道当前 Logo 是用 <img>、<svg> 还是 background-image 实现的——三种方式的控制逻辑完全不同，必须先确认渲染方式再动手。
