aspect-ratio仅在“宽度可测、高度未锁定”时推导高度，不参与盒模型渲染；在box-sizing: border-box下易失真是因它推导content高度，而border-box将padding/border挤入height导致视觉比例塌陷。
aspect-ratio 不参与盒模型的尺寸渲染，它只在盒模型「宽度可测、高度未锁定」时介入推导高度——写上不等于生效，更不是覆盖 width/height 的强制指令。
为什么 aspect-ratio 在 box-sizing: border-box 下容易出错？
它推导的是 content-box 高度，但 box-sizing: border-box 会把 padding 和 border 挤进 height 里，导致视觉比例失真。比如设 aspect-ratio: 16 / 9 + padding: 1rem + box-sizing: border-box，浏览器先按比例算出 content 高度，再扣掉 padding 和 border，最终容器实际高变小，比例就塌了。
- 推荐做法：保持
box-sizing: content-box（默认值），或把 padding 移到子元素上 - 若必须用
border-box，需手动补偿：用calc()把 padding 和 border 从 aspect-ratio 推导值中剔除（但失去响应性） - 别在同一个元素上混用
aspect-ratio和padding-bottom—— 后者会干扰高度计算基准
aspect-ratio 如何与 width/height/min-height/max-height 冲突？
它只在「一个方向尺寸待推导」时起作用。一旦你写了任何显式高度声明，浏览器就认为高度已确定，直接跳过 aspect-ratio 计算。
- ❌ 失效组合：
width: 100%; height: auto;、min-height: 0;、max-height: none;、height: 100%; - ✅ 安全组合：
width: 100%; aspect-ratio: 16 / 9;（高度自动算出）、max-width: 400px; aspect-ratio: 1 / 1;（宽度由 max-width 触发，高度反推） -
min-height和max-height不会阻止 aspect-ratio 生效，但若值小于推导结果，内容会被裁剪；若大于，它不会拉高容器 —— aspect-ratio 只设“首选比”，不强制上限
替换元素（img/video）上直接写 aspect-ratio 为什么无效？
因为 <img alt="CSS3中的aspect-ratio属性如何与盒模型协同工作？" >、<video></video> 是替换元素，它们的尺寸由固有宽高比和 object-fit 控制，不参与常规盒模型计算。浏览器压根不拿 aspect-ratio 去算它们的高度。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：用
<div> 包一层，<code>aspect-ratio写在该<div> 上，再让内部 <code><img alt="CSS3中的aspect-ratio属性如何与盒模型协同工作？" >设width: 100%; height: 100%; object-fit: cover; - 漏掉
width和height声明 →object-fit不触发，图片仍按固有尺寸渲染 - 旧版安卓 WebView 对
object-fit支持差，建议双写：object-fit: cover; object-position: center; - Flex 子项需加：
align-self: start;或父容器设align-items: flex-start; - Grid 子项需加：
align-self: start;，且确保列轨道有明确宽度（如grid-template-columns: 1fr 200px;） - Flex 子项若嵌套 Flex，还得加
min-width: 0;，否则flex-shrink可能把宽度压到 0，导致 aspect-ratio 失去计算基准 - Grid 中 gap 会从总宽扣除，若用
1fr列，需用calc()手动减 gap，否则 aspect-ratio 基于错误宽度推导
Flex/Grid 中 aspect-ratio 为何常被“拉伸”覆盖？
Flex 默认 align-items: stretch，Grid 默认 align-items: stretch，都会强行把子项高度拉满容器，直接压制 aspect-ratio 的推导结果。
最易被忽略的一点：aspect-ratio 的生效前提是「浏览器认为这个元素需要参与布局计算」。display 为 inline、table-cell、contents 的元素，或者父容器是 display: inline-block 且没设 width，都会让 aspect-ratio 静默失效——DevTools 里看不到报错，但高度就是 0。
