轮播图高度抖动的根本原因是.carousel-item默认height: auto且无确定高度来源，切换时按图片原始尺寸重排；w-100仅控制宽度，不提供高度约束，故无法阻止抖动。
轮播图高度抖动不是图片加载慢或JS卡顿，而是.carousel-item默认height: auto，又没继承到确定高度，每次换图就按新图原始尺寸重排布局。
为什么加了w-100还是抖？
w-100只设width: 100%，对height完全不管。父容器.carousel-item仍是height: auto，图片一换，浏览器立刻按它的原始宽高比重算高度——三张图分别是16:9、4:5、1:1，容器就跟着“抽搐”。这不是bug，是CSS默认行为。
-
w-100不能替代高度控制，删掉它，改用纯CSS声明width: 100%和height: 100% - 别指望
img { height: 100% }生效：父级没高度，百分比计算结果就是0px -
max-height和height: 100%不能共存，后者会覆盖前者
怎样让.carousel-item高度固定不跳变？
必须切断“高度由图片撑开”的链条，让所有轮播项共享统一、可预测的高度基准。
- 给
.carousel或.carousel-inner加min-height（比如min-height: 400px或min-height: clamp(300px, 60vh, 500px)） -
.carousel-item设height: 100%，确保严格继承父级最小高度 -
.carousel-item img加width: 100%; height: 100%; object-fit: cover;，并显式写max-width: none（禁用Bootstrap默认的max-width: 100%干扰） - 若含文字标题，同步限制
.carousel-caption的max-height，否则溢出会撑高容器
响应式下小屏高度失控怎么办？
纯min-height: 60vh在手机上容易占满整个屏幕，把后续内容顶走；硬切媒体查询又难维护。
立即学习“前端免费学习笔记（深入）”；
- 优先用
clamp()：例如min-height: clamp(300px, 60vh, 500px)，小屏保底、大屏不空洞 - 旧浏览器兼容方案：两层媒体查询，如
@media (max-width: 768px) { .carousel { min-height: 300px; } } - 绝对不要给
.carousel-item直接设height: 60vh——它在Flex容器里会脱离弹性上下文，导致内部height: 100%失效 - 竖构图图片关键内容被裁？改用
object-fit: contain+background-color填白，再配min-height锚定容器
background-image能彻底解决吗？
能绕过高度抖动，但代价明确：轮播JS依赖真实<img>的DOM位置、加载状态、alt文本和懒加载逻辑。换成背景图后，data-bs-interval可能失灵，SEO和无障碍支持也归零。
- 如果真要用，
background-image必须写在.carousel-item上，而不是子<div>里，否则高度继承链断裂 -
background-size: cover必须搭配background-position: center，否则焦点偏移 - 每张图需单独写
background-image: url(...)，无法用同一class批量控制
最容易被忽略的是：所有高度控制都建立在.carousel-item内只放一张<img>且不额外包裹<div>的前提下。多一层嵌套，height: 100%就断掉了。
