aspect-ratio必须作用于grid-item而非grid容器，因其仅对直接子元素生效；常见失效原因包括子项显式声明宽高、父容器固定行高、未设width:100%及列定义锁死宽度。

aspect-ratio 必须作用在 grid-item 上，不是容器

很多人把 aspect-ratio: 16/9 写在 .grid 容器上，结果完全没效果——这个属性只对网格项（即直接子元素）生效。Grid 容器本身不参与宽高比计算，它只负责划分轨道。

常见错误现象：aspect-ratio 在开发者工具里显示“已应用”，但单元格高度始终由内容或行轨道决定，比例纹丝不动。

• 确保目标元素是 display: grid 或 display: block 的直接子项（即 grid-item）
• 若子项是 <img>，别直接给它设 aspect-ratio——替换元素的固有尺寸优先级更高，该声明会被忽略
• 正确做法：用一个包裹容器（如 <div class="card">）作为 grid-item，再给它设 <code>aspect-ratio

  宽高比失效的四大典型原因

  aspect-ratio 是“后备规则”，浏览器只在没有更强约束时才介入计算。以下任一条件满足，它就直接跳过：

  

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

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

  下载
  • grid-item 上写了 width、height 或 min-width（哪怕 min-width: 0）
  • Grid 容器用了 grid-template-rows: 200px 或 grid-auto-rows: 200px —— 固定行高会覆盖比例计算
  • grid-item 没写 width: 100%，导致 aspect-ratio 缺少宽度基准，无法反推高度
  • 列定义用了锁死宽度的写法，如 grid-template-columns: 200px 200px，且未配合弹性行高

  列定义与行定义如何配合 aspect-ratio

  要让 aspect-ratio 发挥作用，列宽必须可变、行高必须留出计算空间：

  • 列推荐写法：grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))) —— minmax(0, 1fr) 更稳妥，避免内容撑破
  • 行必须用 grid-auto-rows: 1fr（不是 grid-template-rows），它提供弹性占位，为比例计算提供依据
  • 绝对要避免：grid-template-rows: 1fr 1fr 这类显式固定行数写法，它会压制隐式行的弹性行为
  • grid-item 自身禁用 height: 100% 或 min-height —— aspect-ratio 只在 height: auto 时起效

  兼容旧版 Safari 的 fallback 方案

  Safari 15.4 之前版本（如 iOS 15.2）完全不支持 aspect-ratio，降级后表现为自然高度塌陷。必须加兜底：

  • 容器设 position: relative + padding-top: 75%（4:3 → 75%，16:9 → 56.25%）
  • 内容层（如 <img>）设 position: absolute + top: 0 + left: 0 + width: 100% + height: 100%
  • 关键细节：grid-item 要加 min-height: 0 防止 flex/grid 布局下 padding-top 失效
  • 图片需加 object-fit: cover，否则拉伸变形

  真正麻烦的不是写两套样式，而是忘记 min-height: 0 或漏掉 box-sizing: border-box —— 这两个点一旦出错，整个 fallback 区域会塌成一条线。