aspect-ratio在Chrome 88+、Firefox 89+、Safari 15.4+、Edge 101+中可直接使用，但Safari 15.0–15.3会静默忽略导致高度坍缩，必须配合width/max-width生效，不可与height共存，且需搭配object-fit控制内容填充。
现代浏览器里直接用 aspect-ratio 是最稳的方案，但 Safari 15.0–15.3 会静默失效——上线前不真机测，大概率翻车。
为什么只写 aspect-ratio 图片没反应
它不是独立生效的属性，必须配合宽度约束才起作用。没有 width 或 max-width，容器可能坍缩为 0 或撑满全屏，比例计算根本无从谈起。
-
width: 100%最常用，适合卡片、文章图等需填满父容器的场景 -
max-width: 100%更安全，图文混排时防图片溢出，尤其在窄屏下 - 绝对不能同时设
height: 200px这类固定值，aspect-ratio会被完全忽略 - Flex 容器中若父项是
align-items: stretch（默认），子img会被强行拉高，加align-self: center可修复
aspect-ratio 和 object-fit 必须配对使用
aspect-ratio 只管“框”的比例，不管里面图片怎么铺；object-fit 才决定渲染逻辑。两者缺一不可，否则要么留白，要么变形。
-
object-fit: cover：等比缩放+裁切，填满且无留白，适合封面图、轮播图 -
object-fit: contain：等比缩放+完整显示，适合头像、图标等不能裁切的场景 -
object-fit: fill：强制拉满，必然失真，除非设计明确要求，否则别碰 - 如果图片分辨率远低于容器尺寸，
cover会放大模糊——后端返回适配尺寸图比 CSS 补救更靠谱
旧版 Safari 和微信 X5 内核怎么兜底
@supports (aspect-ratio: 1/1) 在 Safari 15.0–15.3 下不触发也不报错，整个规则块被跳过，导致无样式 fallback。必须手动降级，不能依赖特性检测。
- 推荐 padding-bottom 百分比方案：
padding-bottom: 75%对应 4:3（3 ÷ 4 × 100%），padding-bottom: 56.25%对应 16:9 - 父容器设
position: relative，子img设position: absolute; top: 0; left: 0; width: 100%; height: 100% - 服务端或构建时注入原始宽高（
width和heightHTML 属性）仍有价值：SSR 首屏更稳，SEO 友好，还能作为 JS fallback 的基准 - 别用伪元素套
padding-top，语义弱、调试难，不如明确定义一个div占位
真正容易被忽略的是两点：一是 Safari 15.0–15.3 的静默失效只能靠真机验证，本地开发测不出来；二是服务端传下来的宽高字段不是“历史包袱”，而是 SSR 渲染和降级逻辑的关键锚点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
