因为<img>是替换元素，浏览器优先采用其固有宽高比，忽略aspect-ratio；正确做法是将其设在外层块级容器上，并满足display为block/flex/grid、显式声明width或max-width、不设height类属性三个前提。
为什么aspect-ratio写在<img>上没反应
因为<img>是替换元素，浏览器会优先采用其固有宽高比（intrinsic aspect ratio），直接忽略你写的aspect-ratio。这不是 bug，是规范行为——它不参与常规盒模型的高度计算。实测中常见现象包括：容器高度塌为 0、图片加载后突然撑开导致 CLS（布局偏移）、或在 Safari 15.3 及更早版本中完全静默失效。
正确做法是把aspect-ratio加在外层块级容器上，比如<div class="img-container"><img src="..."></div>。该容器必须满足三个前提：
-
display为block、flex或grid子项（不能是inline） - 显式声明
width或max-width（如width: 100%或max-width: 400px） - 不能同时设置
height、min-height或max-height（哪怕height: auto也会干扰）
aspect-ratio必须配width或max-width才生效
只写aspect-ratio: 16 / 9而没给宽度基准，容器可能塌缩为 0，也可能撑满整个父容器，结果完全不可控。这是因为aspect-ratio本身不定义尺寸，只定义“宽高之间的数学关系”，高度必须由宽度推导而来。
推荐写法（兼顾响应式与可控性）：
立即学习“前端免费学习笔记（深入）”；
-
width: 100%+max-width: 400px+aspect-ratio: 4 / 3：宽度随父容器变化，但有上限，高度自动算出 - 在 Flex 布局中，若父容器设了
align-items: stretch（默认值），子容器会被强行拉高，破坏比例；此时加align-self: center可修复 - 绝对定位元素（
position: absolute）上用aspect-ratio无效，它对脱离文档流的元素不生效
object-fit和aspect-ratio必须一起用
aspect-ratio只管容器“多高”，不管里面图片怎么铺。没配object-fit，<img>会按默认行为拉伸填充，极易糊掉或裁半。
关键配合规则：
-
<img>必须设width: 100%且height: 100%，否则object-fit不触发 -
object-fit: cover：等比缩放后居中裁剪填满，适合封面图 -
object-fit: contain：完整显示，四周留白；建议配合background-color防止空白难看 -
object-fit对background-image完全无效——它不是替换元素
Safari 15.3 及更早版本的兼容 fallback
Safari 15.0–15.3 会通过@supports (aspect-ratio: 1 / 1)检测成功，但实际渲染时静默忽略，不报错也不生效。真机测试不可跳过。
降级方案仍需使用经典的padding-top百分比 hack：
- 外层容器设
position: relative、height: 0、padding-top: 75%（对应 4:3 → 3 ÷ 4 = 0.75） -
<img>设position: absolute、top: 0、left: 0、width: 100%、height: 100% - 记得手动计算百分比：
16:9是56.25%，1:1是100%，别记混
保留 HTML 的width和height属性仍有价值：它们提供固有尺寸，有助于 SSR 阶段推导初始比例，避免首屏跳动；但不能只设其中一个，否则浏览器无法推导宽高比。
