aspect-ratio能自动算出高度是因为它在盒模型层面原生约束宽高比，需配合width或height之一使用，浏览器在layout阶段按“宽度÷宽高比”直接计算高度，不依赖内容加载。
aspect-ratio 为什么能自动算出高度
因为 aspect-ratio 是盒模型层面的原生约束，不是渲染层的“视觉拉伸”。当你写 aspect-ratio: 16 / 9 并同时设了 width: 100%，浏览器会直接用「宽度 ÷ 16 × 9」算出高度值，并把它当作计算后的 height 参与布局——这个过程发生在 layout 阶段，不依赖图片是否加载、有没有 intrinsic size。
常见错误现象：div { aspect-ratio: 1 / 1; } 高度为 0 —— 原因是没给宽度来源，aspect-ratio 没法推导，只能退化为无约束状态。
- 必须至少一个轴有确定尺寸（
width或height），否则比例无从计算 - 它不关心内容，只管容器盒子本身；子元素溢出或留白，得靠
object-fit或overflow单独处理 - 和
min-height/max-height共存时，aspect-ratio先算出理想高度，再被这些限制裁剪
为什么写了 aspect-ratio 还要配 width 或 height
aspect-ratio 本身不提供尺寸，只提供比例关系。就像“长宽比是 2:1”不能告诉你这盒子是 200px 还是 2000px 宽——你得告诉浏览器“宽多少”，它才能按比例得出高多少。
使用场景：卡片容器、视频占位、头像框、响应式网格项。
-
width: 100%+aspect-ratio: 4 / 3→ 宽随父容器变，高自动匹配 -
height: 200px+aspect-ratio: 16 / 9→ 高固定，宽自动为200 × 16 ÷ 9 ≈ 355.56px - 别写
width: 100%; height: 100%同时存在——后者会覆盖aspect-ratio的高度计算
flex/grid 子项上 aspect-ratio 失效的真正原因
不是属性写错了，是 flex 和 grid 的默认行为绕过了比例计算。在 display: flex 或 display: grid 的子项上，若未显式设置 align-self: stretch 或未触发主轴/交叉轴的尺寸分配逻辑，浏览器可能直接按内容高度（content height）渲染，忽略 aspect-ratio 推导的高度。
典型表现：盒子高度塌陷为一行文字的高度，或干脆为 0。
- 解决办法：给子项加
align-self: stretch（flex）或justify-self: stretch; align-self: stretch（grid） - 更稳妥的做法：确保父容器设置了明确的
width（比如flex: 1或min-width: 0），让子项有可测量的宽度来源 - 避免在子项上用
height: 100%或position: absolute，这两者都会切断aspect-ratio的高度参与路径
aspect-ratio 和 padding-bottom 百分比方案的本质区别
两者目标一致，但机制完全不同：aspect-ratio 是盒模型原生属性，参与 layout 计算；padding-bottom 是利用“块级元素 padding 百分比始终基于宽度”的副作用来模拟高度，本质是 hack。
容易踩的坑：
-
padding-bottom: 56.25%必须作用在position: relative的父容器上，内容用position: absolute填满——这意味着内容脱离文档流，不可聚焦、文本不可选 - 百分比值必须手算准确：
16 / 9 → 56.25%，4 / 3 → 75%，错一位就失真 - 二者不能混用在同一元素上：现代浏览器解析
aspect-ratio后会重置内部高度逻辑，padding-bottom若写在后面会被忽略；fallback 写法必须是先写aspect-ratio，再写padding-bottom（不支持者才读后者）
最常被忽略的一点：无论用哪种方案，都要确认父容器的宽度是否真实落地——比如 flex 项没设 flex-basis、grid 列没设 grid-template-columns，那整个链路就断了，aspect-ratio 再准也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
