aspect-ratio 宽高比
定义让盒子按指定比例自动计算高度（或宽度），无需 padding-top 技巧
写 aspect-ratio: 16 / 9 后，只要宽度确定，高度自动按比例得出。它取代了 padding-top: 56.25% 的经典黑魔法——那个外层要套相对容器、内容要绝对定位，结构又脏又脆。
配合 max-width 可做响应式视频壳；与 的 height:auto 组合可避免图片加载完引起的布局抖动（CLS）。对未知宽高图片再加 object-fit: cover 裁剪，是卡片图的黄金组合。
- 相比 padding-top 技巧：语义清晰、内容不需要绝对定位
- 配 object-fit: cover 可做任意比例封面图裁剪
- 减少布局抖动（CLS），是 Core Web Vitals 友好做法
HTML
<style> .media { width: min(100%, 480px); aspect-ratio: 16 / 9; background: linear-gradient(135deg,#4a9eff,#a371f7); border-radius: 10px; display:flex; align-items:center; justify-content:center; color:#fff; } .media img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; } </style> <div class="media">16 : 9 恒定</div>
⚠ 常见误区
- 以为要写成 16/9 的计算表达式，其实直接比例即可
- 高度被同时显式设置时 aspect-ratio 不生效