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 百分比模拟比例盒，但关键点不是“怎么写”，而是“怎么不写错”：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 父容器必须有明确宽度（Grid 列宽已定义 / Flex 子项设了 flex-basis / 普通块级设了 width）
• 设 position: relative，再用伪元素或子 <div> 承载 <code>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" 就万事大吉，却忘了首屏图根本不能懒加载。