aspect-ratio必须写在父容器上而非img标签上，因为img是替换元素、默认inline且加载前无固有尺寸，浏览器会静默忽略其aspect-ratio；容器需为block/flex/grid、有宽度基准、未设height，再配合width:100%和object-fit:cover才能生效。
aspect-ratio 为什么必须写在父容器上，而不是 img 标签上
浏览器把 aspect-ratio 当作「容器空间预留指令」，不是图片渲染控制逻辑。而 img 是替换元素，默认 display: inline，且加载前无固有尺寸——直接给它加 aspect-ratio: 16 / 9 会被 Chrome、Safari 等现代浏览器静默忽略，DevTools 里标为 invalid。
真正起作用的是包裹一层块级容器，比如 <div class="img-wrap"></div>，并确保它：
-
display是block、flex或grid（不能是inline） - 没被
position: absolute或float脱离文档流 - 没设
height（否则覆盖比例推导）
写了 aspect-ratio 却还是塌陷？检查这三件事
常见错误不是属性写错，而是组合条件缺失：
- 漏了
width: 100%（或max-width: 100%）：没有宽度基准，aspect-ratio无法推算高度 - 同时写了
height: 200px这类固定值：浏览器直接丢弃aspect-ratio，不报错也不警告 - 父容器用了
align-items: stretch（Flex 默认行为）：会强行撑高子项，覆盖比例计算；加align-self: center可修复
正确最小组合是：.img-wrap { width: 100%; aspect-ratio: 16 / 9; } + .img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
原始宽高比未知时，aspect-ratio 怎么设才不翻车
服务端没传尺寸、URL 动态拼接、CMS 返回缩略图地址——这些场景硬写 aspect-ratio: 16 / 9 容易导致严重裁切或大片留白。
- 首屏关键图：用服务端模板注入内联样式，如
style="aspect-ratio: ${w} / ${h}" - 懒加载图：先设占位值
aspect-ratio: 1 / 1，监听load事件后用 JS 读取naturalWidth/naturalHeight动态 patch 容器样式 - 完全不可控场景：改用
padding-bottomhack（兼容 IE11），但要接受它不支持 CSS 过渡动画
Safari 15.0–15.3 和微信 X5 内核的静默失效问题
这些环境不支持 aspect-ratio，但也不会报错或显示 warning——本地开发一切正常，上线后用户看到图片突然塌陷或拉伸，排查起来极难定位。
仅靠 @supports (aspect-ratio: 1/1) 不够，因为老浏览器根本不识别该规则，整个 CSS 块会被跳过，fallback 彻底失效。更稳妥的做法是：
- 用
padding-bottom百分比方案兜底（如16 / 9 → padding-bottom: 56.25%） - 外层容器加
position: relative，img设position: absolute; top: 0; left: 0; width: 100%; height: 100% - 服务端保留原始宽高字段：既是 SSR 首屏稳定的关键锚点，也是 JS fallback 的计算依据
真正容易被忽略的点是：Safari 15.0–15.3 的静默失效，往往要等真实用户反馈才暴露；而服务端宽高字段，不是“过时配置”，而是 fallback 生效的前提。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
