应覆盖bootstrap的弹性布局约束，使用!important强制设置.navbar-brand的max-height: none、height: auto和align-self: center，并配合padding微调垂直间距，以恢复logo原始比例与居中对齐。
navbar品牌logo高度被截断怎么办
bootstrap默认会给.navbar-brand设置max-height: 100%，同时父容器.navbar有height或line-height限制，导致高宽比异常的logo（比如细长型svg或带文字的组合标）被压缩、裁切甚至看不见。根本原因不是logo本身，而是bootstrap 5+对.navbar-brand施加的弹性布局约束。
直接覆盖max-height不生效？检查这几个地方
单纯写.navbar-brand { max-height: none; }经常无效，因为Bootstrap用!important锁死了部分样式，且Flex布局下max-height受父级align-items和flex-shrink影响更大：
-
.navbar默认是display: flex，子项.navbar-brand会被强制等高对齐，需重置align-self - Bootstrap 5.3+在
.navbar-brand上加了flex-shrink: 0，但没放开flex-grow，Logo撑不开 - 如果用了
.navbar-expand-*类，响应式折叠逻辑会额外注入min-height和overflow控制
推荐写法：用!important + align-self + height三者配合
以下CSS能稳定生效，适配Bootstrap 5.2–5.4：
.navbar-brand {
max-height: none !important;
height: auto !important;
align-self: center !important;
padding: 0.25rem 0 !important; /* 可选：微调垂直间距 */
}
关键点：
-
max-height: none !important必须带!important，否则被Bootstrap源码中的max-height: 100%覆盖 -
height: auto解除固定高度锁定，让图片按原始比例渲染 -
align-self: center避免因父级align-items: stretch导致Logo被拉伸 - 如果Logo仍是偏上/偏下，优先调
padding而不是margin——margin在Flex里可能失效
响应式场景下Logo高度突变怎么处理
小屏幕折叠后.navbar-collapse展开时，Logo常突然变矮。这是因为折叠状态下的.navbar-brand被包裹进.navbar-nav，继承了新的Flex上下文：
- 在
@media (max-width: 991.98px)内单独重写.navbar-brand样式 - 避免用
vh或em单位设高度，改用px或rem保证一致性 - 如果用
<picture></picture>或srcset切换不同尺寸Logo，确保各尺寸的aspect-ratio一致，否则height: auto会失真
真正麻烦的不是高度值本身，而是Bootstrap把Navbar当成“行内工具栏”来设计，而现代Logo往往是独立视觉单元——得先破掉这个隐含假设，再调尺寸。
