不能无条件替代，但现代浏览器（chrome 88+、firefox 89+、safari 15.4+）中aspect-ratio更干净可靠；老safari需降级为padding-top: 56.25%并配合position: relative与absolute定位，且二者须同选择器内顺序书写。
aspect-ratio 能直接替代 padding-top 吗？
不能无条件替代，但绝大多数场景下可以——前提是浏览器支持且父容器没干扰约束。现代项目（Chrome 88+、Firefox 89+、Safari 15.4+）中，aspect-ratio 是更干净、更可靠的首选；老 Safari（iOS 15.2 及更早）会完全忽略它，导致容器高度塌陷为 0，这时必须降级。
怎么写才能让 aspect-ratio 生效又兼容老 Safari
降级方案必须和 aspect-ratio 写在同一选择器里，且顺序固定：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
aspect-ratio: 16 / 9必须在前，padding-top: 56.25%在后 —— 顺序反了部分 Safari 会异常解析 - 父容器必须有明确宽度控制，比如
width: 100%或max-width: 400px，否则aspect-ratio不触发计算 - 降级结构仍需
position: relative，子元素用position: absolute填满，否则padding-top产生的空白区域无法承载内容
为什么 padding-top 百分比在某些嵌套里失效
常见问题不是写法错，而是上级盒模型“偷偷改了规则”：
- CMS 输出的卡片容器可能自带
height: 100%，这会覆盖aspect-ratio的自动高度计算 - Vue 的
<slot></slot>父组件设了flex: 1，导致子元素宽度基准丢失，padding-top百分比算错 - 微信 X5 内核中，若父容器被
transform包裹，需加will-change: transform防止重绘错位
动态比例用 CSS 变量怎么配合 aspect-ratio
直接用变量是可行的，但要注意解析限制：
-
aspect-ratio: var(--ratio, 16 / 9)可以工作，但不能写成var(--ratio, 1.777)—— 浏览器只接受分数形式的值 - 预计算好常用比例：比如
--ratio-4x3: 4 / 3、--ratio-1x1: 1 / 1，避免运行时 JS 拼接字符串 - HTML 中切换比例时，用
data-ratio="4:3"+ 属性选择器更稳：[data-ratio="4:3"] { aspect-ratio: 4 / 3; }
aspect-ratio 参数有用得多。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
