aspect-ratio 是目前最简洁、语义最清晰的固定宽高比方案，但需注意 Chrome 88+、Firefox 89+、Safari 15.4+ 才支持，旧版 Safari 和 IE 不支持；它原生约束盒模型，优于 padding-top hack 的定位依赖与失真问题。
直接说结论：用 aspect-ratio 是目前最简洁、语义最清晰的固定宽高比方案，但必须确认目标浏览器是否支持（Chrome 88+、Firefox 89+、Safari 15.4+），旧版 Safari 和 IE 完全不支持。
为什么 aspect-ratio 比 padding-top hack 更可靠
老办法靠 padding-top 配合 position: absolute 模拟比例，本质是“骗”浏览器：父容器设 height: 0，子元素用 padding-top: 56.25%（16:9）撑开空间。它依赖定位上下文，容易和 margin、transform 冲突，且无法响应式缩放内容（文字/图片会失真）。
aspect-ratio 是原生 CSS 属性，浏览器直接按比例约束盒模型，内容可自由流动，支持 min-width/max-height 等限制，也兼容 object-fit 和 grid 布局。
- 只写
aspect-ratio: 16 / 9就够，不用算百分比、不用嵌套容器 - 支持
aspect-ratio: auto 16 / 9—— 图片等替换元素保留原始宽高比，再强制约束 - 配合
width: 100%或flex: 1即可实现响应式缩放
aspect-ratio 在不同场景下的写法差异
不是所有情况都直接写数字比。关键看内容是否自带尺寸、是否要拉伸。
立即学习“前端免费学习笔记（深入）”；
- 纯色块/空容器：
aspect-ratio: 4 / 3+width: 100% - 内嵌
<img alt="CSS如何让响应式元素比例固定_使用aspect-ratio设置比例" >且不想裁切：aspect-ratio: 16 / 9+img { width: 100%; height: 100%; object-fit: cover; } - 视频或 iframe：
aspect-ratio: 16 / 9+width: 100%，但需注意部分 iframe（如 YouTube）自身会覆盖样式，得加allowfullscreen并确保父容器未设overflow: hidden - Grid 子项：
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))时，每个子项加aspect-ratio: 1 / 1，就能保证网格项始终正方
兼容性 fallback 怎么写才不翻车
不能只靠 @supports 包一层就完事——很多项目仍需支持 Safari 15.3 或微信内置浏览器（基于旧版 WebKit）。简单粗暴的 polyfill 不存在，只能降级。
- 优先用
@supports (aspect-ratio: 1 / 1)包住新写法，里面写aspect-ratio；外面写老式padding-top方案 - 别在同一个选择器里混写两种方案，否则旧浏览器可能解析失败或误触发
- 微信 iOS 客户端（v8.0.4x）识别
aspect-ratio但渲染异常，建议加 UA 判断或统一降级 - 如果用 PostCSS，
postcss-aspect-ratio插件能自动补padding-top，但注意它不处理auto关键字，遇到aspect-ratio: auto 4 / 3得手动处理
真正麻烦的不是写法，而是当 aspect-ratio 和 max-width + height: auto 同时存在时，不同浏览器对“谁优先约束”的解释仍有细微差别——Safari 有时会忽略 max-width 导致溢出，这时候得加 overflow: hidden 卡住边界。
