现代项目应优先使用 aspect-ratio 实现宽高比，老浏览器需用 padding-bottom + position: absolute 两层容器 fallback；aspect-ratio 仅在宽或高之一为 auto 时生效，不可与 height: 100% 同用，且只作用于内容盒，对 inline 元素无效。
现代项目直接用 aspect-ratio，老浏览器 fallback 必须用 padding-bottom + position: absolute 组合，不能混用或跳步。
为什么 aspect-ratio 不能和 height: 100% 同时设
浏览器会忽略 aspect-ratio，因为显式 height 值优先级更高。它只在宽度或高度之一为 auto（或未设置）时才参与计算。常见错误是给元素同时写 width: 100%; height: 100%; aspect-ratio: 16 / 9，结果比例完全不生效。
正确做法是：留一个方向为 auto，比如 width: 100%; height: auto; aspect-ratio: 16 / 9；或者用相对单位控制主导尺寸，如 width: 30vw; aspect-ratio: 4 / 3。
-
aspect-ratio的值是“宽/高”，写成16 / 9，不是9 / 16或小数 - 它只约束内容盒（content box），border 和 padding 会额外增加总占用空间
- 对
inline元素无效，仅适用于块级、替换元素（img、video）或显式设了display: block的元素
老浏览器 fallback 为什么必须用两层容器
因为单靠 padding-bottom 只能“撑开”高度，但内容会流出来或被截断。核心逻辑是「撑空间」和「塞内容」分离：
外层容器设 position: relative; width: 100%; height: 0; padding-bottom: 56.25%（16:9 → 9÷16×100）；内层内容容器设 position: absolute; inset: 0 才能填满这个预留空间。
- 如果把
padding-bottom直接写在目标元素上，又没配position: absolute，内容会把容器撑高，比例就乱了 - 父容器若在
flex或grid中未设flex: none或width，padding-bottom的百分比基准会漂移 - 该方案下，子元素脱离文档流，无法参与父容器的 flex/gird 对齐逻辑
aspect-ratio 在定位元素中为何有时失效
绝对定位元素的 width: 100% 是相对于包含块（最近的 position: relative/absolute/fixed 祖先）的宽度。如果那个祖先没设宽度，100% 就是 0px，aspect-ratio 失去计算基础。
解决办法很直接：确保包含块有明确宽度，比如 width: 100vw、width: 80%（且其祖先也提供了有效宽度），或直接用视口单位——width: 30vw; aspect-ratio: 1 / 1 完全不依赖父容器。
- 不要指望
height: 100%在定位上下文中“自动拉伸”来配合aspect-ratio - 用 DevTools 查看 Computed 面板，确认
width和height是否真为非零值 - 若需动态比例（如根据数据字段变化），JS 设置
style.aspectRatio = '4 / 3'比操作布局属性更可靠
居中固定比例容器时最常漏掉的一环
aspect-ratio 或 padding-bottom hack 只保证盒子自身比例，不负责位置。它默认还在左上角。真正居中要额外加一层定位控制：
比如用 display: flex; justify-content: center; align-items: center 包裹该容器；或对绝对定位容器补 transform: translate(-50%, -50%) 并设 top: 50%; left: 50%。
这一步容易被当成“样式修饰”而忽略，但实际是功能闭环的关键——比例对了，位置偏了，用户看到的仍是错位内容。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
