aspect-ratio 对 position: absolute 元素无效，仅适用于正常流或 display 为 block/inline-block/flex/grid 的元素；绝对定位卡片需用伪元素+padding-top 实现等比，或改用 grid + aspect-ratio。
aspect-ratio 在绝对定位卡片里根本不会生效
直接说结论：aspect-ratio 对 position: absolute 的元素无效——它只对**正常流内**或 display: block/inline-block/flex/grid 等有盒模型参与计算的元素起作用。一旦加了 top/left/right/bottom，浏览器就跳过宽高比例推导，按你写的值（或默认 0）渲染。
想让绝对定位卡片保持长宽比，得靠「伪元素 + padding-top」老办法
这是目前最稳、兼容性最好（IE11 都行）、且不依赖 JS 的方案。核心是利用 padding-top 百分比基于父容器宽度计算的特性，撑出等比高度。
- 给卡片容器设
position: relative，内部放一个position: absolute的内容层 - 用伪元素（如
::before）占位，padding-top: 56.25%（16:9）或75%（4:3） - 内容层
top: 0; left: 0; width: 100%; height: 100%填满伪元素生成的空间
示例：
div.card {
position: relative;
width: 100%;
}
div.card::before {
content: "";
display: block;
padding-top: 56.25%; /* 16:9 */
}
div.card > .content {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}现代写法：用 grid + aspect-ratio + minmax 替代 absolute
如果你能放弃“必须 absolute 定位”的执念，用 display: grid 配合 aspect-ratio 是更干净的解法。它天然支持响应式缩放，且不用 hack。
立即学习“前端免费学习笔记（深入）”；
-
aspect-ratio必须写在网格项（grid item）上，不是容器上 - 父容器设
display: grid，子项设aspect-ratio: 16 / 9和width: 100% - 若需居中或覆盖层，用
grid-area或z-index控制层级，别硬套absolute
示例：
.card-grid {
display: grid;
}
.card-grid > .card {
aspect-ratio: 16 / 9;
width: 100%;
}Chrome 114+ 的新坑：aspect-ratio + transform 会失效
哪怕你绕过了 absolute，用了 aspect-ratio，如果同时加了 transform: scale() 或 translateZ()，某些 Chrome 版本会直接忽略比例约束——表现为卡片被拉伸或压扁。
- 这不是 bug 报告里的已知问题，而是渲染管线中 layout 阶段和 composite 阶段的时序冲突
- 临时规避：把
transform换成margin或top/left（配合position: relative） - 长期建议：用
@supports (aspect-ratio: 1)包裹样式，并为不支持或异常场景提供min-height回退
实际项目里最容易卡住的，不是怎么写，而是没意识到 aspect-ratio 和 absolute 天然互斥。先确认你真需要 absolute —— 很多所谓“覆盖层”“悬浮效果”，用 z-index + 正常流完全够用。
