现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）原生支持 aspect-ratio，写法为 .card { aspect-ratio: 16 / 9; }；IE全系、Edge ≤18、Safari ≤15.3 不支持，需用 padding-top + position: relative 降级，或通过 @supports not (aspect-ratio: 1) 提供兼容方案。
Chrome/Firefox/Safari最新版直接用 aspect-ratio 就行，IE和旧Edge必须降级
现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）已原生支持 aspect-ratio，写法极简：
.card { aspect-ratio: 16 / 9; }它会强制元素按比例缩放内容区域，不依赖子元素或伪元素。但IE全系、Edge ≤18、Safari ≤15.3 完全不识别该属性，CSS解析时直接忽略——这意味着你不能只写这一条就上线。
用 padding-top 模拟比例时，父容器必须是 position: relative
这是最常用的降级方案，核心是利用 padding-top 百分比值基于父容器宽度计算的特性。但容易漏掉关键前提：
- 父容器需设
position: relative（否则子元素absolute定位会脱离预期上下文） - 子容器要
position: absolute; top: 0; left: 0; width: 100%; height: 100%才能撑满 -
padding-top值 = (高度 ÷ 宽度) × 100%，比如 4:3 →padding-top: 75%
position: relative，导致子内容错位或高度塌陷。混合写法：先写 aspect-ratio，再用 @supports 覆盖旧浏览器逻辑
推荐在 CSS 中按「渐进增强」顺序书写：
.media-box {
aspect-ratio: 16 / 9;
}
@supports not (aspect-ratio: 1) {
.media-box {
position: relative;
width: 100%;
}
.media-box::before {
content: "";
display: block;
padding-top: 56.25%; /* 16:9 */
}
.media-box > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}注意 @supports not (aspect-ratio: 1) 比检查具体值更稳妥，避免因语法错误（如写成 16/9 无空格）导致判断失效。
Flex/Grid 容器里慎用 aspect-ratio，某些场景会失效
aspect-ratio 在 Flex 或 Grid 子项中行为不稳定：当父容器设置了 flex: 1 或 grid-template-columns: 1fr 时，部分浏览器（尤其是 Safari 15.4–16.3）可能忽略比例约束，仍按内容撑开。此时降级方案反而更可靠。另外，aspect-ratio 不影响 intrinsic size 计算，如果父容器宽度未定（如 max-width: 100% 但无明确 width），结果可能意外。真要用，建议配合 width: min(100%, 600px) 等明确宽度控制。
