Bootstrap如何让Navbar导航栏中的Logo高度自适应

直接设 height 会让 Logo 变形，因 SVG 或比例异常的 PNG 会强制拉伸失真；正确做法是 width: auto; height: auto 配合 max-height，并避免 font-size 控制、内联样式及 img-fluid 干扰。

为什么直接设 height 会让 Logo 变形

给 .navbar-brand img 硬写 height: 32px 看似简单，但 SVG 或高宽比不一致的 PNG 会拉伸失真。Bootstrap 默认不限制图片尺寸，最终高度由图片自身、max-height 和 height: auto 共同决定——关键不是“设多少”，而是“怎么留出弹性空间”。

1. width: auto; height: auto 是基础，必须同时存在，否则浏览器无法按原始比例缩放
2. 只设 max-height 不够：若图片原始高度小于该值，它就按原图渲染；若大于，则被截断或压缩（取决于 object-fit）
3. 别用 font-size 缩放 <img>——它对图片无效，只影响图标字体（如 <i class="bi bi-logo">）

.navbar-brand img 的推荐写法

真正起效的组合不是单个属性，而是四者协同：

.navbar-brand img {display: inline-block;max-height: 38px;height: auto;width: auto;vertical-align: middle;}

1. display: inline-block 确保 vertical-align 生效（inline 元素默认基线对齐，视觉上偏高）
2. max-height 设为具体像素值（如 38px），避免用 vh 或 em——响应式断点切换时单位换算易出错
3. vertical-align: middle 解决图片和文字基线不对齐导致的“看起来偏上”问题
4. 所有规则必须放在自定义 CSS 文件末尾，或用更高权重选择器（如 .navbar .navbar-brand img），否则被 Bootstrap 源码覆盖

响应式断点下 Logo 高度突变怎么办

小屏折叠后 .navbar-brand 被包裹进 .navbar-collapse，Flex 上下文变更，原有 max-height 失效，Logo 常突然变矮。这不是 Bug，是 Bootstrap 的布局切换机制。

1. 在对应断点内单独重写：@media (max-width: 767.98px) { .navbar-brand img { max-height: 32px; } }（注意：Bootstrap 5 断点是 767.98px，不是 768px）
2. 如果用 <picture> 或 srcset 切换不同尺寸 Logo，确保各源图 aspect-ratio 一致，否则 height: auto 会因宽高比差异导致渲染高度跳变
3. 避免给 .navbar-brand 加 flex-shrink: 0 以外的 Flex 属性——嵌套 Flex 容易触发 min-width: auto 冗余空白，尤其在折叠态

真正卡住高度的往往不是 Logo 本身

即使把 img 设成 24px，整个导航栏仍卡在 56px 高——问题大概率出在父级：.navbar 的 min-height、padding，或 .navbar-brand 继承的 line-height。

1. 检查 DevTools 的 Computed 面板，确认 .navbar 的 height 是 auto 还是固定像素；如果是后者，说明有残留的 min-height: 50px（旧版 Bootstrap 或定制构建产物）
2. 覆盖它：.navbar { min-height: auto; } 或精确设为 min-height: 48px;
3. 重置 .navbar-brand 的行高：.navbar-brand { line-height: 1; }，再配合 padding 微调垂直空间
4. 如果用了 background-image 替代 <img>，改 width/height 没用，必须用 background-size: contain 或 100% auto，并配 background-position: center

实际生效的关键不在数值本身，而在层级关系是否被正确覆盖——尤其是响应式断点切换时，父容器的 Flex 行为变化比图片尺寸更难察觉。