轮播图高度塌陷的根本原因是img异步加载、aspect-ratio未生效或父容器height:auto且无子元素撑开；应主动设置容器height或aspect-ratio，配合overflow:hidden和object-fit:cover确保稳定布局。
轮播图高度塌陷是因为 img 没加载完或父容器没设高
HTML 轮播图（比如用 swiper、bootstrap carousel 或手写 overflow: hidden + transform）一旦高度不固定，就会导致页面布局跳动、下方内容上蹿下跳。根本原因通常是：img 异步加载、aspect-ratio 未生效、或父容器 height: auto 且无子元素撑开。
给轮播容器加 height + overflow: hidden 最直接有效
这是兼容性最好、行为最可控的方式。不要依赖图片自身尺寸，而是主动控制容器高度。
- 给轮播最外层容器（如
.carousel或#banner）设置明确的height，例如height: 400px - 必须同时加
overflow: hidden，否则高度固定但内容可能溢出（尤其 animate 切换时） - 如果要响应式，用
min-height+ 媒体查询，或改用aspect-ratio（见下一条）
用 aspect-ratio 替代固定 height 更灵活（现代浏览器）
aspect-ratio 能让容器按宽高比自动计算高度，避免硬编码像素值，适配不同屏幕更自然。但它在旧版 Safari 和 IE 中不支持。
- 给轮播容器设
aspect-ratio: 16 / 9（或你实际需要的比值，如4 / 3） - 配合
width: 100%，高度就随宽度自适应了 - 仍建议加
overflow: hidden，并确保内部img使用object-fit: cover防止拉伸变形
.carousel {
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.carousel img {
width: 100%;
height: 100%;
object-fit: cover;
}
轮播内 img 不设 height，靠父容器约束
常见错误是给每张 img 单独写 height: 400px —— 这会导致响应式失效、缩放错位、甚至触发重排。
立即学习“前端免费学习笔记（深入）”；
- 所有轮播项（
.carousel-item或li）应设position: absolute或用 flex/grid 定位，不参与文档流高度计算 -
img只设width: 100%和height: 100%，让它填满父容器即可 - 若用
background-image实现轮播，同样只控制容器尺寸，背景图用background-size: cover
height 还是 aspect-ratio），再配合 overflow: hidden 和正确的子元素尺寸继承，就不会再“忽高忽低”。旧项目慎用 aspect-ratio，新项目优先它；但无论如何，别让 img 的加载时机主导布局。 
