aspect-ratio 在 Chrome 88+、Firefox 89+、Safari 15.4+ 稳定支持，IE 完全不支持；需配合 width 或 max-width 使用，不可与具体 height 冲突，推荐分数写法如 16/9，可替代 padding-top 黑科技，但不控制内容排布且不改变子元素固有尺寸。
aspect-ratio 在 Chrome 88+ 才可用，老版本直接失效
不是所有浏览器都支持 aspect-ratio，它在 Safari 15.4+、Firefox 89+、Chrome 88+ 才稳定启用。IE 完全不支持，Edge 旧版（≤ 90）也可能 fallback 失败。
常见错误现象：aspect-ratio: 16/9 写了但盒子没按比例缩放，检查浏览器版本比查 CSS 语法更有效。
使用场景：响应式卡片、视频容器、图标占位图、后台管理页的网格项——只要需要「不管父容器多宽，始终维持固定宽高比」，就适合用它。
- 必须配合
width或max-width使用，否则可能撑满视口或坍缩为 0 - 不能和
height同时设为具体值（比如height: 200px），否则aspect-ratio被忽略 - 支持小数写法，如
aspect-ratio: 1.777，但推荐用分数（16/9）更直观、无精度误差
用 aspect-ratio 替代 padding-top 技巧，代码更直白
过去常用 padding-top: 56.25% + position: relative + 绝对定位子元素来模拟 16:9，逻辑绕、难维护、还容易漏掉 box-sizing: border-box。
立即学习“前端免费学习笔记（深入）”；
现在一行 aspect-ratio: 16/9 就能替代整套 hack，而且子元素可自由流式布局，不用再套两层 wrapper。
示例对比：
/* 老写法（需额外 wrapper） */
.container {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 */
}
.container > * {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}/* 新写法（干净直接） */
.container {
width: 100%;
aspect-ratio: 16/9;
}注意：aspect-ratio 只约束盒模型的「尺寸关系」，不控制内容如何排布；内容居中仍需靠 display: flex 或 text-align 等另行处理。
响应式中慎用 min/max-width + aspect-ratio 组合
当同时设置 min-width 和 aspect-ratio，浏览器会优先满足最小宽度，可能导致高度被强行拉高、比例失真。
典型问题：卡片在小屏上本该压缩变矮，结果因 min-width: 300px 锁死，aspect-ratio 反而让高度变成 168.75px（300×0.5625），超出预期。
- 优先用
width: 100%+max-width控制上限，避免min-width干扰比例计算 - 如果真要保底尺寸，建议用媒体查询单独处理小屏，而不是靠
min-width强行撑开 - Flex/Grid 容器里子项设
aspect-ratio时，注意父容器是否设了flex-shrink: 0，否则可能被压缩变形
aspect-ratio 不影响 intrinsic size，图片/iframe 仍需单独约束
aspect-ratio 是 layout 阶段的约束，不会改变子元素的固有尺寸（intrinsic size）。比如一个 <img src="..."> 本身宽高是 1200×800，即使父容器设了 aspect-ratio: 1/1，图片也不会自动裁剪或缩放——它只是把父容器“撑”成正方形，图片可能溢出或留白。
所以实际项目中，常要搭配：
img { width: 100%; height: 100%; object-fit: cover; }-
iframe { width: 100%; height: 100%; }（确保填满父容器） - 必要时加
overflow: hidden防止内容越界
容易被忽略的一点：服务端返回的图片尺寸不可控，前端仅靠 aspect-ratio 无法解决加载前的布局抖动（FOUC），得配合骨架屏或 intrinsicsize 属性预设尺寸。
