直接给<img>加aspect-ratio无效，因其是替换元素，不参与CSS盒模型尺寸计算；必须作用于外层块级容器，并配合display: block/flex/grid、width/max-width及不设height才能生效。
为什么直接给 <img> 加 aspect-ratio 没用
因为 <img> 是替换元素，原生不参与 CSS 盒模型的尺寸计算逻辑。写 style="aspect-ratio: 16/9;" 在 <img> 上，Safari 15.4 前、IE 全系、多数 Android WebView 都会静默忽略——既不报错，也不预留空间，容器高度始终为 0，加载后突然撑开，抖动更明显。
aspect-ratio 必须配合哪些 CSS 才能生效
它不是独立属性，而是依赖宽度推导高度的“比例计算器”。缺一不可：
-
display: block（或inline-block、grid、flex）确保容器有块级上下文 -
width: 100%或max-width: 100%—— 没有明确宽度，aspect-ratio就像知道比例却不知道起点 -
aspect-ratio: 16/9（或其他目标值），且不能被height、max-height覆盖 - 若父容器是
display: flex或grid，子项必须加min-width: 0; min-height: 0;，否则默认min-height: auto会压制比例计算
如何兼容 iOS 15.3 及更早版本
不能只靠 @supports (aspect-ratio: 1) 切换样式——首屏渲染时旧浏览器已跳过该规则，容器仍为 0 高，抖动照旧。必须双保险：
- 先写 fallback：
.img-wrapper { position: relative; width: 100%; padding-top: 56.25%; }（16:9 对应值） - 再用
@supports覆盖：@supports (aspect-ratio: 1) { .img-wrapper { padding-top: 0; aspect-ratio: 16/9; width: 100%; } } -
<img>必须设position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; - 务必显式写
padding-top: 0，否则新旧规则叠加导致高度翻倍
最容易被忽略的 HTML 层面陷阱
别在 <img> 标签里硬编码 width 和 height 属性（如 width="800" height="450"）。这些像素值会干扰响应式缩放逻辑，在某些浏览器中反而加剧跳闪；原始尺寸信息应通过构建时注入 data-w/data-h 或服务端预计算提供。
立即学习“前端免费学习笔记（深入）”；
