老版本 safari（≤15.3）不支持 aspect-ratio，会静默丢弃该属性，导致高度坍缩；必须用 padding-top 百分比方案降级，并配合 relative/absolute 定位实现兼容。
为什么不能直接用 aspect-ratio？
因为老版本 Safari（aspect-ratio，而项目又得兼容这些环境。这时候就得靠 CSS 变量 + padding-top 布局来模拟——它本质是利用「父容器 padding 百分比基于宽度计算」的特性，把高度“锚定”在宽度上。
怎么用 --aspect-w 和 --aspect-h 算出 padding-top
核心公式是：padding-top: calc((var(--aspect-h) / var(--aspect-w)) * 100%)。但注意：CSS 里除法不能直接写 2 / 3 这种，必须确保两个变量都是数字（不能带单位），且浏览器支持 calc() 中的除法（Chrome 91+、Firefox 86+、Safari 15.4+ 都行；旧 Safari 要降级为预设值）。
- 定义变量时统一用无单位整数，比如
--aspect-w: 16、--aspect-h: 9 - 容器需设
position: relative，子元素用position: absolute; top: 0; left: 0; width: 100%; height: 100%填满 - 旧 Safari 兜底：用
@supports not (aspect-ratio: 1/1)包裹 padding 方案，避免覆盖原生属性
响应式切换纵横比时，变量要怎么更新？
不能只靠媒体查询改一个变量——比如横屏切竖屏时，--aspect-w 和 --aspect-h 得成对交换，否则 calc 会算错。更稳妥的是直接定义新变量对，比如 --aspect-w-md/--aspect-h-md，再用媒体查询批量重设：
:root {
--aspect-w: 16;
--aspect-h: 9;
}
@media (max-width: 768px) {
:root {
--aspect-w: 4;
--aspect-h: 3;
}
}
如果涉及多端（PC/平板/手机/横竖屏），建议用 min-aspect-ratio 或 orientation 媒体特性配合，而不是仅靠宽度断点——比如 iPad 横屏时宽度可能超过 1024px，但仍是 4:3 场景。
常见翻车点：百分比 padding 失效或内容溢出
这是最常被忽略的环节：只要父容器没有明确宽度来源（比如被 display: flex 压缩、或外层 width: fit-content），padding-top 的百分比就无从计算，结果是高度塌陷。
- 确保父容器有可计算的宽度：显式
width、max-width，或处于block流中占满父级 - 子内容别用
height: 100%去撑高——它依赖父元素有确定高度，而这里高度来自 padding，不是 height 属性 - 背景图拉伸问题：用
background-size: cover+background-position: center，别依赖object-fit（旧 Safari 对其在伪元素中支持差）
真正难的不是写那几行 calc，而是让整个嵌套链路上每个父级都“知道自己有多宽”。一旦某层 width 是 auto 且上下文不明确，padding 就会静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
