aspect-ratio是最简单有效的容器比例控制方案，需作用于图片父容器，配合img的width:100%;height:100%;object-fit:cover;display:block；旧版Safari可用padding-top百分比+position:absolute fallback。
直接用 aspect-ratio 锁死容器比例，是最简单、最有效的方案。它不依赖图片是否加载，也不需要 JS，现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）已原生支持。
为什么aspect-ratio比width/height属性更可靠
HTML 的 width 和 height 属性在响应式场景下容易被 CSS 覆盖（比如 max-width: 100%），导致浏览器无法稳定推算宽高比；而 aspect-ratio 是 CSS 层级的声明，优先级更高，且只管比例，不管绝对尺寸。
- 必须作用在图片的直接父容器上（如
<div class="card"><img></div>中给.card设） -
img自身只需写width: 100%; height: 100%; object-fit: cover;，并加display: block消除行内默认间隙 - 避免在父容器上同时设
height、max-height或flex: 1，它们会覆盖aspect-ratio的效果
旧版 Safari（iOS 15.4 之前）怎么 fallback
用 padding-top 百分比模拟比例盒，但关键点不是“怎么写”，而是“怎么不写错”：
- 父容器必须有明确宽度（Grid 列宽已定义 / Flex 子项设了
flex-basis/ 普通块级设了width） - 设
position: relative，再用伪元素或子<div>承载padding-top: 75%（对应 4:3） - 图片本身设
position: absolute; inset: 0;，再配object-fit: cover - 漏掉
inset: 0或忘了position: relative，图片就会被顶到容器下方，看起来像“没生效”
grid-template-rows里别用minmax(0, 1fr)
Grid 行高写成 minmax(0, 1fr) 看似灵活，实则危险：图片未加载时高度为 0，Grid 项会被压缩到几乎看不见；等图片一来，整行突然撑开——抖动更剧烈。
立即学习“前端免费学习笔记（深入）”；
- 若卡片尺寸较统一，直接写固定值，如
grid-template-rows: repeat(auto-fill, 240px) - 若需响应式，改用
@container查询（注意仅 Chromium 和 Safari 支持较好） - 绝对不要用
minmax(0, ...)，下限为 0 就等于放弃控制权
真正卡住人的，往往不是没写 aspect-ratio，而是写了却加在 img 上（部分浏览器不支持）、父容器偷偷被 flex: 1 覆盖、或者以为加了 loading="lazy" 就万事大吉，却忘了首屏图根本不能懒加载。
