直接给加aspect-ratio无效，因其是替换元素，默认inline且不参与盒模型计算，浏览器静默忽略；必须作用于外层块级容器（如div），并满足宽度明确、未设height、未脱离文档流三条件，再配合width:100%、height:100%及object-fit才能正确控制比例与内容呈现。
直接给 aspect-ratio 基本无效，它不参与替换元素的盒模型计算；真正起作用的是父容器，且必须满足“宽度可得、高度未锁死”这个前提。
为什么 ![]()
aspect-ratio 没反应
浏览器把 display: inline，加载前无固有尺寸，aspect-ratio 在此场景下被静默忽略（Chrome/Safari DevTools 里甚至标为 invalid）。即使写了 style="max-width:90%"，容器高度仍为 0，图片加载后突然撑开，抖动更明显。
必须把 aspect-ratio 移到外层块级容器上，例如
- display 是
block、flex或grid（不能是inline或inline-block） - 未脱离文档流（没设
position: absolute或float） - 没声明
height（包括height: auto，某些旧引擎会误判为锁定）
aspect-ratio 生效但图片仍拉伸或留白
aspect-ratio 只管“框”的比例，不管里面图片怎么铺。它和 object-fit 是分工关系，缺一不可：
- 漏了
width: 100%; height: 100%给object-fit完全不生效 - 没写
display: block→ - 父容器是 flex item 且
align-items: stretch（默认值）→ 强行拉高子项，覆盖比例推导；加align-self: start或center阻断 - 用了
object-fit: cover却没配overflow: hidden→ 裁掉的部分仍占空间，可能溢出到相邻元素
Grid/Flex 布局中 aspect-ratio 突然失效
Grid 和 Flex 的隐式约束极易压制 aspect-ratio：
- Grid 中写了
grid-template-columns: 1fr 1fr→ 列宽已由轨道固定，浏览器不再用aspect-ratio反推高度；应改用grid-auto-rows: 1fr+aspect-ratio在 item 上 - Flex item 默认
min-height: auto→ 会阻止高度按比例收缩；需显式加min-height: 0 - 父容器设了
height: 100%或flex: 1→ 上级已锁死高度，子项的aspect-ratio失去推导空间 - CMS 或 Vue
height、max-height、flex-shrink: 0等隐式约束
兼容性陷阱：旧 Safari 和微信 X5 内核根本没读到你的规则
Safari 15.0–15.3 会静默忽略 aspect-ratio，安卓微信 X5 内核至今不支持。仅靠 @supports (aspect-ratio: 1) 检测毫无意义——首屏渲染时老浏览器已跳过整条规则，容器高度仍是 0。
可靠 fallback 必须：
- 用
@supports not (aspect-ratio: 1/1)包裹降级样式（这是唯一靠谱检测） - 结构上用
position: relative容器 +::before伪元素padding-top: 56.25%占位 -
position: absolute; top: 0; left: 0; width: 100%; height: 100% - 顺序不能错：
padding-top规则必须在aspect-ratio后面，否则部分 Safari 会叠加计算导致高度翻倍
真正容易被忽略的是：哪怕你把所有 CSS 都写对了，如果服务端输出的 width="800" style="max-width:90%"，这些 HTML 属性会优先于 CSS 生效，直接锁死尺寸，让 aspect-ratio 彻底失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
