aspect-ratio 是现代 CSS 中唯一原生声明式控制 Grid 项宽高比的方式，需作用于 grid-item 本身而非容器，Chrome 88+、Firefox 89+、Safari 15.4+ 支持；旧版 Safari 会降级为自然高度，需用 padding-top 百分比 + absolute 定位兜底，并配合 min-height: 0 防塌陷及 object-fit 处理图片缩放。
用 aspect-ratio 最直接，但得看浏览器支持情况
现代 CSS 里，aspect-ratio 是唯一原生、声明式控制 Grid 项高宽比的方式。它不依赖内容、padding hack 或 JS，写法干净：aspect-ratio: 16 / 9 就是 16:9。
但注意：Chrome 88+、Firefox 89+、Safari 15.4+ 才支持。旧版 Safari（比如 iOS 15.2）会完全忽略该属性，降级为自然高度——如果你的用户群还有大量 iOS 15.0–15.3 设备，不能只靠它。
常见错误是把它写在 Grid 容器上（如 .grid { aspect-ratio: 1/1; }），这没用——aspect-ratio 必须作用于 Grid 项（即 grid-item 元素本身）。
兼容方案：用 padding-top 百分比 + position: absolute
这是最稳妥的 fallback，原理是利用「块级元素的 padding 百分比基于宽度计算」这一特性，撑出固定比例的空白区域，再把内容绝对定位进去。
立即学习“前端免费学习笔记（深入）”；
实操要点：
padding-top值 = (高度 ÷ 宽度) × 100%，比如 4:3 →padding-top: 75%- 容器需设
position: relative，子元素（内容层）设position: absolute; top: 0; left: 0; width: 100%; height: 100% - Grid 项本身要设
display: grid或display: flex来约束子内容布局，否则文字可能溢出 - 别忘了加
box-sizing: border-box，避免 padding 和 border 叠加导致尺寸错乱
示例结构：
.item {
position: relative;
aspect-ratio: 4 / 3; /* 新浏览器走这里 */
}
.item::before {
content: "";
display: block;
padding-top: 75%; /* 3/4 = 0.75 */
}
.item > .content {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
}
Grid 中用 min-height 配合 aspect-ratio 防止塌陷
当 Grid 项内容为空或极简时，即使写了 aspect-ratio，某些浏览器（尤其是 Safari）仍可能渲染为高度 0。这是因为 aspect-ratio 不是强制最小尺寸，而是“按比例缩放”的参考依据。
解决方法很简单：加一行 min-height: 0 或 min-height: 1px。
原因在于，Grid 项默认有 min-height: auto，而这个 auto 在无内容时行为不一致；显式设为 0 后，aspect-ratio 才真正接管尺寸计算。
其他容易踩的坑：
- 不要同时设
height和aspect-ratio——height会优先生效，覆盖比例逻辑 - 如果父 Grid 用了
grid-auto-rows: minmax(0, 1fr)，也要确认子项没被align-items: stretch拉伸变形 - Flex 容器里的 Grid 项，可能因 flex 的默认对齐行为干扰比例，建议统一用
align-items: start
用 object-fit 处理图片类 Grid 项的裁剪与填充
如果 Grid 项里塞的是 <img>，光靠 aspect-ratio 只能控制容器，图片本身仍可能拉伸或留白。这时候得配合 object-fit。
典型组合：
aspect-ratio: 1 / 1; object-fit: cover;→ 图片居中裁剪填满正方形aspect-ratio: 16 / 9; object-fit: contain;→ 图片完整显示，上下/左右留白- 别对
<img>直接设width: 100%; height: 100%—— 这会破坏object-fit效果，应让 img 自然流式占满其父容器
注意：object-fit 对背景图（background-image）无效，那种场景得用 background-size: cover + 父容器 aspect-ratio。
实际项目里，aspect-ratio 能用就用，但别假设它 100% 可靠；padding-top 方案看着土，但在混合设备、混合浏览器的生产环境里，往往更可控。真正麻烦的不是写法，而是得同时盯住 Grid 容器的 track sizing、子项的 alignment、以及内容自身的尺寸行为——三者稍一打架，比例就偏了。
暂无评论