aspect-ratio 是最简等比矩形方案，chrome 88+、firefox 89+、safari 15.4+ 原生支持；需配合 display: block/inline-block 使用，如 aspect-ratio: 16 / 9，可与 width: 100% 组合自动计算高度。
用 aspect-ratio 最简实现等比例矩形
现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）已原生支持 aspect-ratio，它是目前最直观、最可靠的响应式等比矩形方案。只需给容器设一个宽高比值，它会自动维持该比例，无论父容器如何缩放。
常见错误是试图在 img 或 video 上直接写 aspect-ratio 却忽略其默认 display: inline —— 必须配合 display: block 或 inline-block 才生效。
-
aspect-ratio: 16 / 9表示宽:高 = 16:9；写成16/9（无空格）也合法，但带空格更易读 - 可与
width: 100%组合使用，高度由比例自动计算，无需 JS 或额外 wrapper - 不兼容旧版 Safari（
用 padding-top 百分比做兼容 fallback
当必须支持 IE 或老 Safari 时，padding-top 百分比仍是唯一稳定方案：它的百分比基于**包含块的宽度**，而非自身高度，因此能“骗”出等比高度。
关键限制是：内容必须脱离文档流（如用 position: absolute），否则 padding 会把后续元素往下推。
- 若需 4:3 矩形，设
padding-top: 75%（因为 3 ÷ 4 = 0.75） - 容器需设
position: relative，子元素用position: absolute; top: 0; left: 0; width: 100%; height: 100% - 不要用
padding-bottom替代 —— 它虽也基于宽度，但无法可靠撑起容器高度（尤其在 flex/grid 父容器中）
为什么不用 height: 0; padding-bottom 的组合？
这个写法看似精巧，实则在现代布局中容易失效。它依赖父容器有明确宽度，且对 flex item 或 grid item 的尺寸计算干扰大。
典型问题包括：在 display: flex 的父容器中，子项设 height: 0 后可能被压缩为 0 高度，padding 不再触发高度撑开；或在 grid-template-columns: 1fr 下，宽度未定导致 padding 百分比计算异常。
- 仅推荐用于传统流式布局（
display: block父容器 + 固定或 max-width 限制） - 若父容器是
flex或grid，优先改用aspect-ratio或显式设置父宽（如min-width: 0+width: 100%） - 注意：
padding-bottom百分比在table-cell中行为不一致，应避免
响应式切换比例时的注意事项
用媒体查询切换 aspect-ratio 没问题，但切换 padding-top 值时，需确保所有相关样式（尤其是 position 和 top/left）同步更新，否则内容会偏移或裁切。
更隐蔽的问题是：某些 CSS-in-JS 库（如 Emotion）在 SSR 场景下可能提前计算静态 padding 值，导致首屏比例错误。
- 建议统一用
@media包裹整套等比规则，包括aspect-ratio和 fallback 的padding-top - 避免在 JS 中动态修改
style.paddingTop—— 容易与 CSS 规则冲突，改用 class 切换更可控 - 移动端小屏下慎用 21:9 等超宽比例，部分 Android WebView 对大分子比（如
21 / 9）解析有精度误差
aspect-ratio 覆盖主流环境后，fallback 逻辑往往只在测试阶段被触发。真正棘手的是嵌套场景：比如一个 aspect-ratio: 1 / 1 的卡片内部再塞一个 aspect-ratio: 4 / 3 的图——此时外层卡片的宽高会影响内层计算，但浏览器处理得足够健壮。唯一要盯紧的，是那些被 overflow: hidden 截断又没预留足够 padding 的角落。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
