直接设 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 共同决定——关键不是“设多少”，而是“怎么留出弹性空间”。
-
width: auto; height: auto是基础，必须同时存在，否则浏览器无法按原始比例缩放 - 只设
max-height不够：若图片原始高度小于该值，它就按原图渲染；若大于，则被截断或压缩（取决于object-fit） - 别用
font-size缩放<img>——它对图片无效，只影响图标字体（如<i class="bi bi-logo"></i>）
.navbar-brand img 的推荐写法
真正起效的组合不是单个属性，而是四者协同：
.navbar-brand img {
display: inline-block;
max-height: 38px;
height: auto;
width: auto;
vertical-align: middle;
}
-
display: inline-block确保vertical-align生效（inline元素默认基线对齐，视觉上偏高） -
max-height设为具体像素值（如38px），避免用vh或em——响应式断点切换时单位换算易出错 -
vertical-align: middle解决图片和文字基线不对齐导致的“看起来偏上”问题 - 所有规则必须放在自定义 CSS 文件末尾，或用更高权重选择器（如
.navbar .navbar-brand img），否则被 Bootstrap 源码覆盖
响应式断点下 Logo 高度突变怎么办
小屏折叠后 .navbar-brand 被包裹进 .navbar-collapse，Flex 上下文变更，原有 max-height 失效，Logo 常突然变矮。这不是 Bug，是 Bootstrap 的布局切换机制。
- 在对应断点内单独重写：
@media (max-width: 767.98px) { .navbar-brand img { max-height: 32px; } }（注意：Bootstrap 5 断点是767.98px，不是768px） - 如果用
<picture></picture>或srcset切换不同尺寸 Logo，确保各源图aspect-ratio一致，否则height: auto会因宽高比差异导致渲染高度跳变 - 避免给
.navbar-brand加flex-shrink: 0以外的 Flex 属性——嵌套 Flex 容易触发min-width: auto冗余空白，尤其在折叠态
真正卡住高度的往往不是 Logo 本身
即使把 img 设成 24px，整个导航栏仍卡在 56px 高——问题大概率出在父级：.navbar 的 min-height、padding，或 .navbar-brand 继承的 line-height。
- 检查 DevTools 的 Computed 面板，确认
.navbar的height是auto还是固定像素；如果是后者，说明有残留的min-height: 50px（旧版 Bootstrap 或定制构建产物） - 覆盖它：
.navbar { min-height: auto; }或精确设为min-height: 48px; - 重置
.navbar-brand的行高：.navbar-brand { line-height: 1; }，再配合padding微调垂直空间 - 如果用了
background-image替代<img>，改width/height没用，必须用background-size: contain或100% auto，并配background-position: center
