直接给 img 加 max-height 无效是因为 img-fluid 的 height: auto 使浏览器优先按宽高比缩放，不触发 max-height 截断；应改用 ratio 容器设 max-height，并配合 object-fit 控制显示方式。
直接给 img 加 max-height 为什么无效
写了 style="max-height: 400px;"，但小屏下图片依然撑满宽度、高度远超 400px——这不是 CSS 失效，而是浏览器计算逻辑导致的。因为 img-fluid 只设了 max-width: 100% 和 height: auto，浏览器先按原始宽高比等比缩放，再检查是否超过 max-height；而多数情况下缩放后高度仍低于上限，于是“不触发截断”，实际高度完全由宽度决定。
用 ratio 容器 + max-height 才真正起作用
限制图片高度的关键不是图片本身，而是它所在的容器空间。正确组合是：
-
<div class="ratio ratio-16x9" style="max-height: 50vh;"><img class="img-fluid"></div>——ratio提供宽高比占位，max-height作用于容器，img-fluid自然缩放 - 若需完整显示（上下留白），给
img加style="object-fit: contain;" - 若需填满无留白（裁剪），加
style="object-fit: cover;" - 别在
img上同时写width行内属性和max-height，它们会干扰尺寸计算
响应式单位选 vh 还是 dvh
纯像素值（如 400px）在手机上太大、桌面又偏小。更合理的是：
-
max-height: 50vh：适合 banner 图，但 iOS Safari 滚动时地址栏收起会导致视口高度突变 -
max-height: 50dvh：2026 年已广泛支持，能动态适配地址栏显隐，推荐用于关键视觉区域 - 避免对文字内容区用
height: 100vh——内容超长时会被硬截断；优先选min-height: 50vh+ 容器自然撑开 - 如果父级用了
.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 更关键。
