现代浏览器用 aspect-ratio，旧版 Safari/IE 需 fallback 到 padding-top 百分比方案；aspect-ratio 生效需满足 width 显式设置、非 inline 显示、height 为 auto 等条件；padding-top 方案要求容器 relative 定位与 height: 0，内容层 absolute 填满；Grid 中各单元格需单独设 aspect-ratio 并确保块级显示。

现代浏览器直接用 aspect-ratio，旧版 Safari 或 IE 必须 fallback 到 padding-top 百分比方案——没有“通用一行解”，必须按目标环境选策略。

为什么 aspect-ratio 有时不生效

它不是“写了就自动起作用”的属性，依赖几个硬性条件：

• width 或 max-width 必须显式设置（比如 width: 100%），否则没有参考宽度，比例无从计算
• 元素不能是 display: inline（如默认的 <img>、<span>），得加 display: block 或 inline-block
• 不能同时设 height 为非 auto 值（比如 height: 200px），否则整个 aspect-ratio 被忽略
• Flex/Grid 容器的子项若未显式声明 display: block，某些浏览器（尤其 Safari 15.0–15.3）会静默失效

padding-top 百分比方案怎么写才不踩坑

这是兼容性最稳的 fallback，但容易因定位和流脱离出错：

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

• 容器必须设 position: relative、width: 100%、height: 0、padding-top: 56.25%（16:9 → 9 ÷ 16 × 100）
• 内容层必须用 position: absolute + inset: 0（或 top: 0; left: 0; right: 0; bottom: 0）填满
• 别用 padding-bottom 替代 padding-top：它在 flex 或 grid 父容器中可能无法撑开高度
• 如果父容器是 display: flex，且子项设了 height: 0，部分浏览器会把它压缩成 0 高度，导致 padding 失效

Grid 中让每个单元格等比缩放

只靠 grid-template-columns: repeat(3, 1fr) 不够，它只管列宽，不管行高或单个格子的宽高比：

立即学习“前端免费学习笔记（深入）”；

• 每个网格项需单独加 aspect-ratio: 1 / 1（或其它比值），并确保它是块级元素（display: block）
• 避免用 1fr 直接控制行高；改用 grid-template-rows: repeat(3, minmax(0, 1fr)) 防止内容最小尺寸干扰等比感
• 如果某格子有文字或图片，记得配 object-fit: cover 或 overflow: hidden，否则内容会溢出破坏视觉比例

真正麻烦的地方不在写法本身，而在混合场景：比如一个用了 aspect-ratio 的卡片，又嵌在 flex 容器里，还要求响应式换行——这时必须逐层检查 display 类型、父容器约束、以及 Safari 特定版本的静默降级行为。别指望一套 CSS 通吃所有环境。