不能完全替代，因aspect-ratio在Safari 15.4以下、Firefox 89以下及所有IE中不支持，旧版iOS或企业内网环境仍需padding-top百分比方案作为可靠fallback。
aspect-ratio 能直接替代 padding-top 做响应式宽高比吗
能，而且更干净。以前用 padding-top + position: relative/absolute 模拟宽高比，本质是靠内边距撑开容器高度，结构脆弱、语义不清、还容易和子元素定位冲突。现在用 aspect-ratio 是原生 CSS 控制，浏览器直接参与布局计算，不依赖文档流干扰。
但要注意：它只作用于**块级替换元素（如 <img>）或设置了 display: block / inline-block 的普通元素**；对 display: inline 或未显式设 display 的元素无效。
哪些浏览器支持 aspect-ratio，要不要加 fallback
aspect-ratio 在 Chrome 88+、Firefox 89+、Safari 15.4+、Edge 88+ 已稳定支持。iOS Safari 15.4+ 也支持，但 iOS 15.0–15.3 不支持——这意味着约 3% 的移动端用户（尤其未及时升级系统的老设备）会失效。
如果你的页面必须兼容这些旧环境，fallback 推荐用 padding-top 方案，而不是 JS 计算，因为更轻量、无执行时机问题：
立即学习“前端免费学习笔记（深入）”；
div.video-container {
position: relative;
width: 100%;
/* fallback for Safari < 15.4 */
padding-top: 56.25%; /* 16:9 → 9/16 = 0.5625 */
}
div.video-container > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* 现代浏览器覆盖 fallback */
@supports (aspect-ratio: 16/9) {
div.video-container {
padding-top: 0;
aspect-ratio: 16/9;
height: auto;
}
div.video-container > * {
position: static;
}
}aspect-ratio 的值写成 16/9 还是 1.777？有区别吗
有区别，推荐始终用 16/9 这类分数形式。
-
16/9是标准语法，CSS 规范明确定义为「宽/高」比值，可读性强，且不会因浮点精度导致渲染偏差 -
1.777虽然数值等价，但属于<number>类型，在部分旧版 Safari（如 15.4 初期）中解析不稳定，偶发被忽略 - 不能写成
16:9或"16/9"，那会直接使声明无效
用 aspect-ratio 时内容溢出或拉伸怎么办
这是最常踩的坑：aspect-ratio 只控制容器尺寸，不约束子元素行为。如果里面放一张没设 object-fit 的 <img>，或一个没设 max-width 的子容器，就会撑破或变形。
典型修复方式：
- 图片类：给
<img>加width: 100%; height: 100%; object-fit: cover; - 视频类：同上，或对
<video>显式设width: 100%; height: 100%; - 自定义内容区：子元素用
display: flex; align-items: center; justify-content: center;居中，避免默认顶部左对齐压边 - 绝对定位子元素（如遮罩层）：确保父容器已设
position: relative，否则定位基准错乱
复杂点在于：当父容器同时设了 max-width 和 aspect-ratio，宽度缩小时高度会等比收缩，但某些场景下你可能希望高度有下限——这时得配合 min-height 或媒体查询微调，不能只靠 aspect-ratio 一招鲜。
