移动端轮播图高度等比缩放的核心是用aspect-ratio锁定容器宽高比并配合width:100%和object-fit:cover，媒体查询仅作断点微调；旧浏览器可用padding-bottom+绝对定位兼容。
移动端轮播图高度要随屏幕等比例缩放，核心不是“固定高度”，而是“保持宽高比 + 容器自适应”。媒体查询只负责断点切换时的样式微调，真正起作用的是容器比例控制和内部媒体渲染方式。
用 aspect-ratio 锁定轮播容器比例
现代浏览器（Chrome 88+、Safari 15.4+、Firefox 89+）直接支持 aspect-ratio，这是最简洁可靠的方案：
- 给轮播外层容器（如
.carousel或.carousel__track）设置aspect-ratio: 16 / 9或4 / 3，它会自动维持该比例，高度随宽度弹性变化 - 配合
width: 100%，容器就能在不同断点下始终按比例伸缩 - 内部图片或视频设为
width: 100%; height: 100%; object-fit: cover;，确保内容填满且不变形
旧浏览器兼容：padding-bottom 技巧
对不支持 aspect-ratio 的安卓 WebView 或 iOS Safari 14 及以下，用经典 padding-bottom 方案：
- 容器设
position: relative; width: 100%; padding-bottom: 56.25%;（对应 16:9） - 内部图片/视频用绝对定位：
position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; - 媒体查询中可针对不同断点调整 padding-bottom 值，例如平板用
padding-bottom: 75%（4:3），横屏手机用padding-bottom: 33.33%（3:1）
媒体查询只做断点微调，不主导缩放逻辑
媒体查询的作用是适配布局结构变化，而非驱动等比缩放本身。常见合理用法包括：
- 小屏（≤768px）：启用全屏轮播，
.carousel { height: 100vh; }，同时保留aspect-ratio防止拉伸 - 中屏（769px–1024px）：限制最大宽度，
.carousel { max-width: 800px; margin: 0 auto; }，避免过宽失真 - 大屏（≥1025px）：增加左右留白，或切换为多图并排模式，但每个轮播项仍保持自身宽高比
图片与视频统一用 object-fit + 宽高 100%
无论轮播用 <img alt="H5 中媒体查询怎么处理移动端轮播图高度在各断点下的等比例缩放" > 还是 <video></video>，都应避免内联 width/height 属性，统一采用：
-
width: 100%; height: 100%;占满容器 -
object-fit: cover;（推荐封面类）或contain;（需完整显示时） -
object-position: center;确保焦点区域居中 - 若需响应式加载，搭配
srcset和sizes，例如：<img src="1.jpg" srcset="1.jpg 375w, 1@2x.jpg 750w" sizes="(max-width: 768px) 100vw, 800px" alt="H5 中媒体查询怎么处理移动端轮播图高度在各断点下的等比例缩放" >
