用 aspect-ratio 最省事，现代浏览器均支持；老浏览器需 padding-bottom + absolute 的 fallback 方案，核心是“撑空间”与“塞内容”分离，且须注意包含块、百分比参照对象及居中逻辑。
直接用 aspect-ratio 最省事，现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）都支持；老浏览器 fallback 才需要 padding hack。
用 aspect-ratio 实现固定宽高比最简单
它让浏览器自动推导缺失尺寸，不依赖父容器高度、不触发重排、语义清晰。只要设了 width 或 height 中一个，另一个就按比例算出来。
-
aspect-ratio值写成16 / 9或4 / 3，不要加单位，也不用换算成小数 - 配合
width: 80%、width: 30vw或max-width: 400px都能正常工作；height留为auto即可 - 绝对定位元素也能用——前提是它的包含块（最近的
position: relative祖先）有明确宽度；否则width: 80%会失效，但width: 30vw仍有效 - 别和
height: 100%同时设，否则aspect-ratio被忽略
老浏览器 fallback：padding-bottom + absolute 容器必须配对使用
常见错误是把 padding-bottom 直接写在目标元素上，结果内容被挤出、定位错乱。核心逻辑是「撑空间」和「塞内容」分离。
- 包裹容器设
position: relative、width: 100%、padding-bottom: 56.25%（16:9），高度必须为0 - 内部元素设
position: absolute、top: 0、left: 0、width: 100%、height: 100% -
padding-bottom百分比基于父宽计算，所以值 =(height ÷ width) × 100，比如 4:3 →padding-bottom: 75% - 如果父容器宽度不固定（如
display: flex下未设flex: none），padding 计算基准会漂移，导致比例失准
绝对定位元素里设 width/height 百分比为什么常失效
因为百分比参照的是「包含块」，不是父元素——而包含块默认是最近的定位祖先。如果那个祖先没设宽高，百分比就解析为 0px。
立即学习“前端免费学习笔记（深入）”；
- 用 DevTools 查看该元素的
Computed面板，确认width和height是否真为非零值 - 解决办法：给定位祖先显式设
width和height（如height: 100vh或配合aspect-ratio） - 更稳妥的等比缩放方案是
transform: scale()：先设固定基准尺寸（如width: 200px; height: 100px），再用 JS 或 CSS 变量动态缩放 -
scale()不影响布局流，但会改变视觉原点；居中时记得补transform: translate(-50%, -50%)，否则缩放中心偏移
居中固定宽高比容器的常见陷阱
仅靠 aspect-ratio 或 padding hack 只能保比例，盒子本身还在左上角。真正居中要额外一层控制逻辑。
- 外层用
display: flex; align-items: center; justify-content: center最直观，但要给包裹容器加flex: none，否则可能被拉伸变形 - 用
position: fixed时，别只写top: 0; left: 0; margin: auto——这在多数浏览器里不居中；正确写法是top: 50%; left: 50%; transform: translate(-50%, -50%) - 如果页面可滚动，
fixed定位会脱离滚动流，确认这是你想要的行为；否则优先用 flex 居中 + relative 定位 - 所有涉及百分比的定位（如
top: 20%）都依赖父容器有明确高度；若父容器高度来自内容，百分比可能无效
真正麻烦的不是实现比例，而是搞清每个百分比、每个 position 的参照对象——浏览器不会告诉你它到底在跟谁算，只能靠 DevTools 的 Computed 面板反推。
