aspect-ratio必须作用于内容载体（如或背景层）而非外层div，因横竖屏切换时div尺寸被媒体查询重设，而子元素需绑定比例逻辑才能避免拉伸或留白；配合object-fit才能稳定缩放裁切。
直接用 width 和 height 固定值或 100vh 会失守——横竖屏切换时视口宽高互换，长宽比必然崩。核心解法是把比例控制权交给 aspect-ratio，并确保它作用在内容载体（如 <img alt="移动端H5横竖屏切换时怎么通过CSS保持长宽比不变？" > 或伪元素）上，而非容器本身。
为什么 aspect-ratio 必须用在图片/背景层，而不是外层 div
因为横竖屏切换时，div 的 width 和 height 值会被媒体查询重设，但它的子元素若没绑定比例逻辑，就会被拉伸或留白。而 <img alt="移动端H5横竖屏切换时怎么通过CSS保持长宽比不变？" > 或 background-image 自带渲染上下文，aspect-ratio + object-fit 能让浏览器在不改 DOM 结构的前提下自动缩放裁切。
-
aspect-ratio: 750 / 1334是设计稿原始比例（竖版长图），写死这个值比用 JS 算更稳定 - 如果用在
div上，还得额外加height: 0; padding-bottom: calc(1334 / 750 * 100%)兜底，否则低版本安卓 WebView 不识别aspect-ratio - 千万别给父容器设
overflow: hidden后再靠transform: scale()强行“压”比例——这会导致 touch 事件坐标错乱，尤其在微信 WebView 中
object-fit 选 cover 还是 contain？看内容类型
两者都依赖 aspect-ratio 才能生效，区别在于是否允许裁剪：
- 营销长图、全屏视觉图 → 用
object-fit: cover，保证铺满且不变形，顶部/底部可能被裁掉（用户滚动可查看） - 步骤引导图、信息图解 → 用
object-fit: contain，完整展示但四周留白；此时必须配合padding-bottom占位，否则 DOM 高度为 0，页面会塌陷抖动 - 不要混用
max-width: 100%和width: 100%：前者会让图片在窄屏下缩得太小，后者才能真正撑满容器宽度
横屏时 vh/vw 含义翻转，别让它参与比例计算
横屏后 100vh = 屏幕物理宽度，100vw = 屏幕物理高度，和你直觉相反。任何基于 vh 写的 height 或 padding-top 都会错位。
立即学习“前端免费学习笔记（深入）”；
- 放弃
height: 100vh做长图容器主高；改用min-height: 100dvh（兼容性好）+aspect-ratio控制内部图片 - 媒体查询里不要写
@media (orientation: landscape) { .img { height: 100vh; } }—— 横屏下100vh变成很短的值，图直接被压扁 - 真要响应方向微调，只动
object-fit或文字font-size，别碰尺寸单位本身
安卓低版本 WebView 不支持 aspect-ratio 怎么办？
补一个兼容 fallback：用 height: 0 + padding-bottom 模拟内边距占位，这是 CSS 领域最稳的 aspect ratio hack。
- 假设设计稿是 750×1334，就写：
height: 0; padding-bottom: calc(1334 / 750 * 100%) - 必须配
width: 100%和position: relative，否则padding-bottom不生效 - 注意：这个方案在 iOS Safari 15.4+ 里和
aspect-ratio并存也没问题，浏览器会优先用原生属性
最容易被忽略的是：横竖屏切换时，aspect-ratio 生效的前提是父容器有明确宽度（比如 width: 100%）。如果父级用了 flex 但没设 flex-shrink: 0，或者被祖先的 transform 截断了包含块，比例就会失效——这时候查 computed 样式，aspect-ratio 显示 active，但实际没起作用。
