轮播图高度跳变的根源是容器未设高，应给.carousel-inner设min-height或height，并配img的width:100%;height:100%;object-fit:cover/contain，确保html结构正确。
轮播图高度跳变，不是图片问题，是容器没控高——.carousel-item 默认 height: auto，完全依赖图片原始尺寸撑开，不同宽高比的图进来，高度就忽高忽低。
给 .carousel-inner 设 min-height 或固定 height
这是最直接有效的起点。不能只靠图片或 w-100 类，它们不提供高度约束。
-
.carousel-inner必须有明确高度来源，推荐用min-height: 400px（或60vh），避免内容为空时塌陷 - 若需全屏，用
height: 100vh，但注意移动端 Safari 的地址栏收放会导致100vh跳变，可加min-height: 100vh; height: 100%组合兜底 - 别给每个
.carousel-item单独设height: 100vh——它定位是absolute，父容器仍无高度，无效
.carousel-item img 必须配 height: 100% + object-fit
光设容器高还不够，图片得真正填满它，否则留白、拉伸、溢出都会出现。
- 删掉
w-100类（它只设宽，且会干扰width: 100%的精确控制） - 图片必须写
width: 100%; height: 100%，否则object-fit不生效 - 选
object-fit: cover（裁剪填满，适合横幅）或object-fit: contain（等比居中，留白但保全图） - 禁用
max-height和height: 100%同时存在——浏览器会忽略max-height
结构错误会导致高度控制完全失效
很多“调不动高度”的问题，根源不在 CSS，而在 HTML 结构错乱。
- 整个轮播只能有一个
.carousel-inner，多个容器会让 JS 切换逻辑错乱，高度继承链断裂 -
.carousel-item必须是.carousel-inner的**直接子元素**，中间不能插div包裹，否则height: 100%失效 - 避免用
background-image替换<img>来“绕过”高度问题——轮播 JS 依赖真实<img>的加载状态和 DOM 位置，背景图会导致切换卡顿、预加载失败、懒加载失效
真正难处理的是混合宽高比图片（比如竖图+横图）共存时的视觉权衡：用 cover 必然裁剪关键区域，用 contain 又可能在小屏上只剩一条细线。这时候得回归业务——轮播是展示氛围，还是传递信息？选哪个 object-fit 值，本质是在控制谁被牺牲。
