能，但仅限Chrome 88+、Firefox 89+、Safari 15.4+；Safari 15.0–15.3静默忽略，需padding-bottom hack降级，且必须配合width/max-width生效，避免与height冲突。
现代浏览器中直接用 aspect-ratio 是最简方案，但 Safari 15.0–15.3 会静默忽略它——上线后图片突然塌陷或拉伸，八成卡在这儿。
为什么只写 aspect-ratio 图片没反应
常见错误是漏了宽度约束：aspect-ratio 必须配合 width 或 max-width 才能生效，否则容器可能坍缩为 0 或撑满视口。
-
width: 100%最常用；max-width: 100%更适合图文混排场景 - 不能同时设
height: 200px这类固定值，否则aspect-ratio被完全忽略 - Flex/Grid 容器中子项若设了
align-items: stretch（Flex 默认），会强行撑高覆盖比例计算；加align-self: center可修复 - Safari 15.0–15.3 不报错也不渲染，需真机验证，不能只信 Can I Use 的绿色标记
如何兼容旧版 Safari 和微信 X5 内核
必须兜底，仅靠 @supports (aspect-ratio: 1/1) 不够——老浏览器不识别该规则，会跳过整个块，导致无样式 fallback。
- 推荐「padding-bottom 百分比占位」：父容器设
position: relative; width: 100%; padding-bottom: 75%（4:3 → 3÷4×100%），子img绝对定位填满 - 服务端或构建时注入原始宽高（
width和heightHTML 属性）仍有价值：SSR 首屏渲染更稳，SEO 友好，且可作为 JS 动态计算的 fallback 基准 - 避免在伪元素里套
padding-top：语义弱、调试难，不如直接用div+position明确控制
aspect-ratio 和 object-fit 怎么配才不出错
aspect-ratio 只管容器“框”的比例，不管里面图片怎么铺；object-fit 才决定裁剪或缩放逻辑——两者必须一起调，缺一不可。
-
object-fit: cover最常用，但边缘会被切；设计要求完整显示人脸时，得换contain -
object-fit: fill强制拉满，必然变形，除非明确接受失真，否则别用 - 图片分辨率远低于容器尺寸时，
cover会放大模糊；建议后端返回适配尺寸图，CSS 不负责超分 -
background-image对aspect-ratio完全无效——它是装饰性内容，没固有宽高；想保比例，优先用
真正容易被忽略的点是：服务端宽高字段不是“过时配置”，而是 SSR 和 fallback 的关键锚点；而 Safari 15.0–15.3 的静默失效，往往要等用户反馈才暴露——本地开发测不出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
