直接给 img 加 max-height 不管用，因为 img-fluid 的 height: auto 优先按宽高比缩放，max-height 仅在缩放后高度超限时才生效；正确做法是用 ratio 容器约束空间并配合 object-fit 控制显示。
直接给 img 加 max-height 为什么不管用
常见错误现象：写了 style="max-height: 400px;"，但小屏下图片依然撑满宽度、高度远超 400px。这是因为 img-fluid 的核心逻辑是 max-width: 100% + height: auto —— 浏览器先按原始宽高比等比缩放，再看是否超过 max-height；而多数情况下缩放后高度仍低于上限，于是“不触发截断”，实际渲染高度完全由宽度决定。
img-fluid 配合 max-height 的正确组合方式
真正起效的不是单独限制图片本身，而是控制它所在的容器空间：
- 用
<div class="ratio ratio-16x9" style="max-height: 400px;"><img class="img-fluid"></div>，ratio提供宽高比占位，max-height作用于容器，再配合object-fit: contain或cover控制内部显示方式 - 避免在
<img>上同时写width行内属性和max-height，它们会互相干扰尺寸计算 - 若需完整显示且上下留白，加
style="object-fit: contain;"；若需填满无留白，用object-fit: cover;
响应式 max-height 应该用什么单位
纯像素值（如 400px）在手机上可能过大，在桌面又偏小。更合理的是：
- 用视口单位：
max-height: 50vh表示占屏幕高度一半，适合 banner 图 - iOS Safari 地址栏动态遮挡问题？改用
max-height: 50dvh（2026 年已广泛支持） - 别对内容区用
height: 100vh，文字超长时会被硬截断；优先选min-height: 50vh+ 容器自然撑开 - 如果父级用了 Bootstrap 栅格（如
.container > .row），记得给父级也设min-height，否则子级高度无参照
防图片加载前布局抖动（CLS）
只靠 img-fluid + max-height，图片加载前容器高度为 0，加载后突然撑开，导致布局偏移。这不是 bug，是未预留占位的结果：
- 显式写
width和height属性（如width="1600" height="900"），让浏览器提前算出宽高比 - 或直接用
<div class="ratio ratio-16x9"><img class="img-fluid"></div>，ratio类已内置宽高比占位逻辑 - 别依赖 JS 懒加载后补 height，CLS 已发生，无法挽回
max-height 更关键。
