最稳解法是给.carousel-inner设min-height（如clamp(300px, 60vh, 500px)），.carousel-item设height: 100%，图片用width: 100%; height: 100%; object-fit: cover；根本原因是.carousel-item默认height: auto，高度随图片原始尺寸跳变。
直接给 .carousel-inner 设 min-height，再让 .carousel-item 吃满这个高度，图片用 object-fit: cover 控制裁剪——这是最稳、兼容性最好、且不依赖 JS 的解法。
为什么轮播图在移动端高度会忽高忽低
不是图片加载慢，也不是 JS 切换延迟。根本原因是 .carousel-item 默认 height: auto，而它的高度完全由内部 <img alt="如何通过CSS修复移动端轮播图高度忽高忽低的问题？" > 的原始尺寸决定。一张 16:9 的横图和一张 4:5 的竖图切换时，容器就跟着“抽搐”。移动端视口宽度频繁变化（比如横竖屏、键盘弹出），加剧了重排抖动。
常见错误包括：
- 只加
w-100—— 它只管宽度，对高度毫无约束 - 写
height: 100%却没给父级设高度基准 —— 百分比算出来是0px - 用
background-image替代<img alt="如何通过CSS修复移动端轮播图高度忽高忽低的问题？" >—— 轮播 JS 失效，data-bs-interval、懒加载、SEO 全丢
必须设置 min-height 的位置和值
别设在 .carousel-item 上，它只是子项；也不建议设在 .carousel 最外层，容易被其他样式干扰。最稳妥的是锁死 .carousel-inner：
立即学习“前端免费学习笔记（深入）”；
-
.carousel-inner { min-height: clamp(300px, 60vh, 500px); }—— 小屏保底、中屏按比例、大屏封顶，兼顾可读性和留白 - 如果项目要兼容 Safari 14.1 以下（2021 年前旧版），改用媒体查询：
@media (max-width: 768px) { .carousel-inner { min-height: 300px; } } - 避免写
height: 60vh—— 它会强制截断内容，且在 Flex 容器里可能失效
图片尺寸控制必须配 object-fit 和显式宽高
仅靠 width: 100% 或 w-100 不够，浏览器仍按原始比例撑高容器。关键补救动作：
.carousel-item img { width: 100%; height: 100%; object-fit: cover; }- 删掉 Bootstrap 默认的
max-width: 100%干扰（加img { max-width: none; }） - 如果轮播里有文字标题（
.carousel-caption），记得加max-height: 80px等限制，否则溢出会撑高整个.carousel-item - 禁用
background-image方案 —— 它虽能“固定高度”，但代价是轮播功能退化为静态展示
移动端额外注意：100vh 和滚动条干扰
如果你用了 min-height: 60vh 却发现小屏上轮播图把后续内容顶出视口，问题大概率出在 vh 单位本身：
- iOS Safari 把地址栏高度计入
1vh计算，刚加载时100vh比可见区域高约 50px，滚动后地址栏收起，但高度不重算，导致底部留白或裁切 - 解决办法不是放弃
vh，而是优先用dvh（dynamic viewport height）：min-height: clamp(300px, 60dvh, 500px); - 但
dvh在 Safari 16.4+ 才稳定支持，所以必须兜底：@supports not (min-height: 100dvh) { .carousel-inner { min-height: clamp(300px, 60vh, 500px); } } @supports (min-height: 100dvh) { .carousel-inner { min-height: clamp(300px, 60dvh, 500px); } }
真正容易被忽略的点是：所有这些高度控制都建立在 html 和 body 已设 height: 100% 的前提下。漏掉这一条，100% 和 vh 都会失效。
