aspect-ratio必须加在卡片容器而非上，因为是替换元素，优先遵循固有宽高比，直接覆盖CSS声明；容器需设display: block/flex、明确宽度、不设height，并配合object-fit和width/height:100%才生效。
直接用 grid + aspect-ratio 就能做出真正响应、比例稳定、不抖动的卡片组，但前提是别把 aspect-ratio 加在 <img alt="怎样使用CSS Grid结合aspect-ratio保持卡片比例？" > 上——它得加在卡片容器上。
为什么 aspect-ratio 加在 <img alt="怎样使用CSS Grid结合aspect-ratio保持卡片比例？" > 上没反应？
因为 <img alt="怎样使用CSS Grid结合aspect-ratio保持卡片比例？" > 有固有宽高比（intrinsic aspect ratio），浏览器会优先尊重图片原始尺寸逻辑，直接覆盖你写的 aspect-ratio 值。这不是 CSS 失效，而是渲染优先级规则。
- 检查开发者工具里
<img alt="怎样使用CSS Grid结合aspect-ratio保持卡片比例？" >元素是否被标记为“intrinsic”或显示“overridden” - 把
aspect-ratio: 4 / 3挪到它的父容器（比如<div class="card"> 或 <code><button></button>）上 - 确保该容器不是 inline 元素：显式加
display: block或display: flex - 别同时写
width和height—— 这会强制覆盖aspect-ratio的计算基准 - 推荐用
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))——auto-fit收缩空轨道，minmax(300px, 1fr)给卡片设最小可用宽度 - 必须配
gap: 1rem，别用margin模拟间距，否则网格外侧会多出空白 - 若子项是
inline或未设min-width: 0，minmax()可能卡死缩放，需显式加min-width: 0 - 避免在卡片上写
height、min-height或max-height，它们会直接跳过aspect-ratio - 卡片容器加
display: flex; flex-direction: column - 文字+按钮区域加
margin-top: auto（比flex: 1更稳） - 确保父容器没设
align-items: stretch干扰高度计算（Grid 默认就是stretch，所以卡片项需显式设align-self: start） - 图片必须套在带
aspect-ratio的容器内，内部<img alt="怎样使用CSS Grid结合aspect-ratio保持卡片比例？" >写width: 100%; height: 100%; object-fit: cover - 卡片外层设
position: relative和padding-bottom: 75%（对应 4:3） - 内容区用
position: absolute; top: 0; left: 0; width: 100%; height: 100% - 必须给卡片设
min-width: 0，否则 Grid 在 IE 下可能忽略 padding 占位 - 别忘了
box-sizing: border-box，避免 padding 和 border 叠加出界 - 用
@supports (aspect-ratio: 1/1)包裹现代写法，确保降级干净
Grid 列定义怎么写才不破坏比例？
硬写 grid-template-columns: 1fr 1fr 1fr 或 repeat(3, 1fr) 看似简单，但小屏下卡片过窄、大屏又留白，且容易和 aspect-ratio 冲突。
卡片内文字和按钮怎么吸底？
单纯靠 height: 100% 或 flex: 1 容易失效，尤其当卡片因 aspect-ratio 被拉高后，内部 flex 容器若没高度基准，子项就按内容撑开，无法“吸底”。
立即学习“前端免费学习笔记（深入）”；
老浏览器兼容时 padding-bottom 怎么兜底？
aspect-ratio 在 IE11 和旧版 Safari（如 iOS 15.2 及更早）完全不支持，降级必须手动实现，且不能和 Grid 行为打架。
最容易被忽略的一点：Grid 容器默认 align-items: stretch，它会强制子项填满行高，直接覆盖 aspect-ratio 的推导逻辑——哪怕你写了 aspect-ratio，只要没给子项加 align-self: start 或显式高度约束，它就静默失效。
