手机端轮播图高度忽高忽低是因.carousel-item使用position: absolute或flex导致父容器无法感知内容高度，height: auto失效；应采用aspect-ratio: 16/9 + width: 100%锁定比例，旧版safari需fallback为padding-bottom: 56.25%，并添加ios touch支持。

为什么手机端轮播图高度会忽高忽低

不是代码写错了，是轮播项（比如 .carousel-item）用了 position: absolute 或被 flex 抽离文档流，父容器根本“看不见”图片，height: auto 自然失效。用户看到的就是切换时页面上跳、首屏内容被顶出视口。

用 aspect-ratio 锁定比例（现代方案）

前提是所有轮播图原始宽高比一致（如 16:9）。这是最稳的解法——容器不靠内容撑开，而是靠自身比例站住。

• 给最外层轮播容器加 aspect-ratio: 16/9 和 width: 100%
• img 设 width: 100%、height: 100%、object-fit: cover，别写 height: auto
• 旧版 Safari（≤15.6）不支持 aspect-ratio，必须 fallback

fallback 方案：用 padding-bottom 模拟比例

当需要兼容 iOS 15 及更早版本时，这是最可靠的高度锚点方式。

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

• 容器设 position: relative，子项 position: absolute; top: 0; left: 0; width: 100%; height: 100%
• 用 padding-bottom: 56.25%（对应 16:9）替代 height，让容器按宽算高
• 图片仍用 object-fit: cover，避免拉伸变形
• 注意：padding-bottom 值要和图片实际比例严格匹配，4:3 就是 75%

移动端必须加的媒体查询断点

Bootstrap 5 默认最小断点是 sm（576px），不是 768px。漏掉这个，iPad mini 等设备就会高度失控。

• 至少写两档：@media (max-width: 575.98px) 和 @media (min-width: 576px)
• 小屏优先用 min-height: 40vh，比像素值更贴合屏幕尺寸
• 配 overflow: hidden，防止竖构图图片顶出容器
• 禁用 height: 100% 和 max-height 同时存在，后者会被忽略

最容易被忽略的是：iOS 上滑动无效，往往不是高度问题，而是漏了 data-bs-touch="true"（Bootstrap 5.3+）或未启用 touch-action: pan-x。高度稳了，交互才可能正常。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！