aspect-ratio与固定比例布局。

aspect-ratio 是目前给盒子锁定宽高比最省事的方式：一个声明就能替代过去 padding-top 撑百分比的老套路，新项目应该优先用它，老项目再用 @supports 做降级兜底。

aspect-ratio 的生效规则：只有一个维度是 auto 时才起作用

结论：aspect-ratio 只在盒子有一个方向是「自动尺寸」时才决定另一边，如果同时写死了 width 和 height，这个属性会被完全忽略。

写法很简单，斜杠两边可以是数字也可以是长度值：

.card-cover { width: 100%; aspect-ratio: 16 / 9; }
.avatar     { width: 48px; aspect-ratio: 1; }     /* 等价 1 / 1 */

还有一种是 auto 关键字：aspect-ratio: auto 16 / 9。它的含义是——对 <img>、<video> 这类替换元素优先用文件自身的固有比例，其他普通盒子才套用 16/9。做图片占位骨架时这个写法很实用，能避免图片没加载完时布局高度塌成 0。

另外注意：aspect-ratio 算的是盒子的首选比例，不是硬约束。一旦内容比计算结果更高，盒子会被撑开，比例就破了，后面「坑」一节会讲怎么处理。

三种固定比例方案的取舍

结论：能用 aspect-ratio 就别用 padding 百分比；只有在必须兼容 2021 年前的老浏览器时才回退。

1. aspect-ratio（首选）：一行搞定，内容参与正常文档流，不需要绝对定位，可读性最好。
2. padding-top 百分比技巧（兜底）：padding 的百分比是按包含块宽度算的，所以 padding-top: 56.25% 正好等于 16:9。老写法长这样：

.ratio { position: relative; height: 0; padding-top: 56.25%; }
.ratio > * { position: absolute; inset: 0; }

它的代价是内容必须绝对定位或再套一层包裹，且盒子无法被内容自然撑高——做全屏轮播图还行，做内容卡片就很别扭。

1. 依赖图片自身固有比例：img { width: 100%; height: auto; } 对单张图最省事，但多图网格里各图高度不一，会出现高低错落，需要配 object-fit: cover 加固定比例容器才整齐。

常见坑：flex 拉伸、grid 拉伸和内容溢出

结论：aspect-ratio 失效十有八九不是属性写错，而是被 flex/grid 的默认拉伸或最小尺寸规则覆盖了。

• Grid 里失效：网格项默认 align-items: stretch，会被拉伸到行高，比例形同虚设。解决：给该项加 align-self: start，或容器上设 align-items: start。
• Flex 里被内容顶高：flex 子项默认 min-height: auto，内部文字多一点就顶破比例。解决：加 min-height: 0，或给盒子 overflow: hidden。
• 被 min-height 覆盖：写了 aspect-ratio: 1 又写 min-height: 200px，窄屏下盒子会被 min-height 拉成竖长条。要么去掉 min-height，要么用媒体查询分别控制。
• 和 height: 100% 打架：父级没有确定高度时 height: 100% 会失效，此时比例仍按 auto 计算，容易出现「改了半天没反应」的错觉，先确认父链高度是否可解析。

实战组合：图片网格与视频容器

结论：aspect-ratio 负责框，object-fit 负责内容适配，两者配合才是完整的固定比例布局。

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;   /* 裁切填满，不变形 */
  border-radius: 6px;
}

想给响应式图片换不同裁切比例，可以在媒体查询里直接改 aspect-ratio 的值，比如窄屏用 1（方图）、宽屏用 16 / 9，比重新算 padding 百分比直观得多。视频容器同理，iframe { width: 100%; aspect-ratio: 16 / 9; } 即可，不再需要那层 position: relative 的壳。

降级写法

结论：老浏览器不支持时，布局会退化成「按内容自适应高度」，不会崩，但会跳动，所以建议显式降级。

.cover { position: relative; height: 0; padding-top: 56.25%; overflow: hidden; }
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

@supports (aspect-ratio: 1 / 1) {
  .cover { height: auto; padding-top: 0; aspect-ratio: 16 / 9; }
  .cover img { position: static; }
}

用 @supports 把新写法单独放进去，老浏览器走 padding 方案、新浏览器走原生方案，两边都不会出现布局塌陷。

一句话收束：固定比例布局的正解是「一个维度自动 + aspect-ratio + object-fit」，注意规避 flex/grid 的默认拉伸与内容溢出，再用 @supports 保留一层 padding 兜底，就能既简洁又稳。