直接设 .navbar-brand img 的 max-height 并配合 height: auto 能实现自适应最大高度，但必须加 !important 覆盖 bootstrap 默认的 max-height: 100%，同步设 height: auto 和 align-self: center 防拉伸偏移，并在折叠态下用媒体查询单独适配。
直接设 .navbar-brand img 的 max-height 并配合 height: auto 就能实现自适应最大高度，但必须绕开 Bootstrap 的弹性布局挤压和父容器隐性限制，否则图片会被截断或失真。
为什么 max-height 直接写不生效
Bootstrap 5+ 默认给 .navbar-brand 设了 max-height: 100%（带 !important），且父级 .navbar 是 display: flex，子项受 align-items: stretch 拉伸影响。单纯写 .navbar-brand { max-height: 32px; } 会被覆盖或忽略。
- 必须加
!important覆盖原生规则：.navbar-brand { max-height: none !important; } -
max-height: none是前提——否则height: auto仍被锁死在 100% 容器高内 - 仅设
max-height不够，要同步控制height: auto和align-self: center，否则 SVG 或细长图仍会偏上/拉伸
.navbar-brand img 的安全缩放组合
对 <img> 标签，最稳的写法是三者绑定，缺一不可：
.navbar-brand img {
max-height: 2.5rem !important;
height: auto !important;
width: auto !important;
}
-
max-height控制上限，用rem保证缩放一致性，避免vh在小屏下失控 -
height: auto解除固定高度锁定，让浏览器按原始宽高比渲染 -
width: auto防止某些 SVG 因缺失viewBox导致宽度塌陷 - 别加
img-fluid——它带max-width: 100%，在紧凑导航栏里反而压缩 Logo
移动端折叠后 Logo 突然变矮怎么办
折叠态下 .navbar-brand 被移入 .navbar-collapse，继承新的 Flex 上下文，原 max-height 规则常失效。
- 必须单独写媒体查询，断点严格用
@media (max-width: 991.98px)（不是 992px） - 折叠态推荐值略小于桌面端，例如：
.navbar-brand img { max-height: 2rem !important; } - 如果用了
<picture></picture>或srcset，确保所有尺寸的 Logo 具有相同aspect-ratio，否则height: auto会算错高度 - 检查
.navbar-collapse.show的max-height是否过小——它若只容得下 2 行内容，Logo 所在区域就被硬压扁
真正卡住人的不是高度值，而是上下文
你调的从来不是一张图的高度，而是它所处的整个渲染链路：.navbar 的 min-height、line-height，.navbar-brand 的 padding 和 flex-shrink，甚至 <svg></svg> 文件里有没有 viewBox。任何一个环节没对齐，max-height 就只是摆设。调试时优先看 DevTools 的 Computed Styles，确认 max-height 和 height 到底是谁在生效。
