aspect-ratio 有效需满足：容器有可计算宽度、无 height 冲突、浏览器支持（Chrome 88+/Firefox 89+/Safari 15.4+），且 inline 元素需设 display: block/inline-block；响应式关键在提供宽度来源，推荐写法 aspect-ratio: 16 / 9；旧浏览器需用 padding-top + position 降级，注意顺序与逻辑隔离。
直接用 aspect-ratio 就行，但必须确保容器有可计算的宽度，且不能和 height 冲突——否则它会静默失效。
为什么写了 aspect-ratio 却没效果
最常见原因是浏览器不支持或容器缺少尺寸基准。Chrome 88+、Firefox 89+、Safari 15.4+ 才原生支持；IE 和 Safari 15.3 及更早版本完全忽略该属性。
- 检查是否在
<img alt="如何制作响应式等比例矩形_应用CSS Aspect-ratio长宽比属性" >或<video></video>上直接写了aspect-ratio：它们默认是display: inline，必须加display: block或inline-block才生效 - 父容器宽度为
0（比如未设flex-basis的 flex item）时，aspect-ratio算不出高度，盒子会坍缩 - 同时设置了
height: 200px这类固定值，aspect-ratio会被直接覆盖 - 用了
min-height或max-height，可能在小屏下强行撑高/压扁，破坏比例
怎么让 aspect-ratio 真正响应式地工作
核心是给它一个“可测量的宽度来源”，然后让它推导高度。不需要 JS，也不需要嵌套 wrapper。
- 显式控制宽度：
width: 100%、max-width: 400px、flex: 1（在 flex 容器中）、grid-column: span 2（在 grid 中） - 写法推荐用分数：
aspect-ratio: 16 / 9比1.777更可靠，无浮点误差 - 正方形不用算：
aspect-ratio: 1 / 1或直接用aspect-square（Tailwind v3.0+） - 图片内容要填满：子元素需
width: 100%; height: 100%+ 显式object-fit: cover，否则默认拉伸
旧浏览器兼容 fallback 怎么写才不冲突
不能靠 CSS @supports 自动降级，得手动提供后备。关键是顺序和逻辑隔离。
立即学习“前端免费学习笔记（深入）”；
- 先写现代方案：
aspect-ratio: 16 / 9 - 再写降级：
padding-top: 56.25%（注意是padding-top，不是padding-bottom） - 容器必须
position: relative，子元素用position: absolute填满 - 不要混用：同一元素上既设
aspect-ratio又设height: 0，后者会干扰前者计算 - 百分比别手算错：4:3 是
padding-top: 75%（3 ÷ 4 = 0.75），不是 133%
容易被忽略的细节：内容缩放和布局上下文
aspect-ratio 只管容器盒模型的比例，不管里面的内容是否等比缩放。文字不会自动变小，图片也不会自适应裁剪。
- 图片必须配
object-fit，否则即使容器比例正确，图也会拉伸或留白 - 在
display: grid中，它只作用于 grid item，不影响行高或列宽 - 在
display: flex中，若父容器是flex-direction: column且没设高度，item 的aspect-ratio可能不触发 - 服务端渲染（SSR）时，部分框架会把不支持的属性过滤掉，需确认构建工具是否保留该 CSS
