aspect-ratio 是 CSS 原生属性，非 JS 库或 HTML 属性，写法为 aspect-ratio: 16 / 9，Chrome 88+、Firefox 89+、Safari 15.4+ 支持，IE 完全不支持；它替代 padding-top hack，直接控制高宽比，无需 wrapper 和绝对定位，但需注意 width 决定 height 计算，不可与 height 同时设为非 auto。
aspect-ratio 是 CSS 原生属性，不是 JavaScript 库或 HTML 属性
很多人搜 aspectratio 会误以为是个独立 API 或 polyfill 名称，其实它是标准 CSS 属性，叫 aspect-ratio（注意是连字符，不是驼峰）。浏览器支持从 Chrome 88、Firefox 89、Safari 15.4 开始稳定可用，IE 完全不支持——别在兼容旧版 IE 的项目里硬上。
它直接作用于块级元素（或 display: block/flow-root 的元素），写法简单：aspect-ratio: 16 / 9 或 aspect-ratio: 1（即 1:1）。不需要额外 wrapper、padding hack 或 JS 监听 resize。
为什么不用 padding-top 百分比 hack 了
老方案靠 padding-top: 56.25%（对应 16:9）+ position: relative/absolute 实现长宽比，本质是用内边距撑高、内容绝对定位覆盖。问题不少：
- 必须多一层 wrapper，HTML 结构冗余
- 内容区域需手动设
position: absolute，容易脱离文档流、z-index 冲突 - 响应式下若父容器 width 变化，padding 计算依赖父宽，但 height 不随内容自动伸缩，文字溢出难处理
- 无法和
min-height、max-width等组合自然生效
而 aspect-ratio 是 layout-level 控制：浏览器把该元素的 height 视为由 width 和比例共同决定，后续子元素布局照常进行，语义清晰、可预测。
立即学习“前端免费学习笔记（深入）”；
实际用法和常见坑点
aspect-ratio 本身只管“高宽关系”，不管尺寸来源。它的行为取决于 width 如何确定：
- 如果元素 width 是固定值（如
width: 300px），height 就按比例算出来，比如aspect-ratio: 4 / 3→ height = 225px - 如果 width 是百分比或
fit-content，height 同样按比例推导，但最终尺寸由父容器约束 - 如果 width 是
auto且父容器没给宽度限制，元素可能收缩到内容最小宽度，此时 height 也极小——这不是 bug，是逻辑结果 - 不能和
height同时设为非auto，否则height会覆盖aspect-ratio（浏览器忽略比例） - 与
min-width/max-width兼容良好，但min-height会强制突破比例（这是设计意图：min/max 优先级更高）
示例：一个响应式卡片封面图
.cover {
width: 100%;
max-width: 600px;
aspect-ratio: 16 / 9;
background: #eee;
}这样在窄屏下宽度收缩，高度自动按 16:9 调整；到 600px 后不再变宽，但高度仍守比例。
需要 fallback 时怎么写
对不支持 aspect-ratio 的浏览器（主要是旧 Safari 和所有 IE），可以用 @supports 隔离新写法：
.card {
width: 100%;
}
.card::before {
content: "";
display: block;
padding-top: 56.25%; /* 16:9 */
}
.card > * {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}
<p>@supports (aspect-ratio: 1) {
.card::before { display: none; }
.card > * { position: static; }
.card { aspect-ratio: 16 / 9; }
}注意：fallback 里用了伪元素 + 绝对定位，所以要确保 .card 有 position: relative，否则子元素定位失效。这个细节经常被漏掉，导致内容跑飞。
真正麻烦的不是写 fallback，而是测试——Safari 15.3 及更早版本识别 @supports (aspect-ratio: 1) 为 true，但实际不生效，得加 UA 判断或用 @supports not (aspect-ratio: 1) 反向兜底。
