.carousel-item高度塌缩或跳变的根本原因是绝对定位使其脱离文档流，导致父容器无法感知内容高度；应通过aspect-ratio、min-height或背景图等锚定容器高度来解决。
为什么.carousel-item高度会塌缩或跳变
根本不是图片本身的问题，而是轮播容器脱离了文档流后，父级无法感知内容高度。.carousel-item 默认是 position: absolute，所有幻灯片叠在同一位置，浏览器不会为它们逐个计算高度，.carousel-inner 就可能坍缩成 0 或随当前激活项忽高忽低。
常见表现：切换时页面突然上跳、首屏轮播被拉得过高、小屏下文字飘出图片外。这不是 bug，是绝对定位的自然结果。
- 别指望
height: auto生效——它对脱离流的元素无效 - 别给
.carousel-inner直接设height——会截断内容，尤其文字溢出或响应式换行时 - 图片加了
w-100但没约束高度，object-fit又没配对，就会拉伸或留白
如何让每张图撑起一致的轮播高度
核心思路是“不靠图片撑，而靠容器锚定”。用可预测的尺寸基准替代不可控的内容推导。
- 优先用
aspect-ratio: 16 / 9（现代浏览器），它能锁定宽高比且不影响响应式缩放 - 旧浏览器 fallback 方案：给
.carousel-item设min-height: 40vh，再配合@media (max-width: 575.98px) { .carousel-item { min-height: 30vh; } } - 若必须用图片驱动高度，就改用
background-image+background-size: cover，把图片当背景而非<img>元素——这样高度完全由容器控制
图片变形或裁剪错位的根本原因
不是 Bootstrap 的锅，是 <img> 的默认行为和 CSS 层叠顺序共同作用的结果。比如 object-fit: cover 裁剪时，参照的是 .carousel-item 的实际渲染高度——而这个高度如果没显式设定，就会随 viewport 宽度、字体大小、甚至滚动位置微调。
-
object-fit: cover是推荐方案，但必须搭配稳定容器高度，否则裁剪区域飘忽 -
object-fit: contain能完整显示，但上下/左右留白不可控，尤其在移动端窄屏时白边更明显 - 避免混用
width: 100%和height: 200px——前者响应式，后者固定，冲突直接导致变形
Modal 里 Carousel 高度失效的特殊处理
模态框打开瞬间，.modal-body 往往还没重绘，.carousel-item 的高度计算被延迟触发，导致图片只显示左上角一小块，或者整个 .carousel-inner 高度为 0。
- 给
.modal-body加min-height: 300px（或根据业务场景调整），别依赖自动撑开 - 确保每张
<img>都有class="d-block w-100"（Bootstrap 5）或class="img-fluid"（v4），否则宽度不占满，高度更无从谈起 - 不要在
.carousel-item上写height或max-height——它会破坏object-fit的计算逻辑
