aspect-ratio必须作用于外层容器而非，因是替换元素，浏览器优先尊重其html width/height属性或固有宽高比，导致直接设置无效；需移除干扰属性，配合width/max-width、object-fit及height:100%才能生效。
aspect-ratio 本身不能直接修复图片比例错乱，它只对容器生效，且必须配合清除干扰项、显式尺寸控制和内容适配策略才能起作用。单独给 <img> 写 aspect-ratio 几乎总是无效。
为什么直接写 img { aspect-ratio: 16/9 } 没反应
浏览器把 <img> 当作替换元素（replaced element），它的尺寸计算优先级是：HTML 的 width/height 属性 > CSS width/height > aspect-ratio。只要这两个 HTML 属性都存在（比如 CMS 输出或 SSR 渲染带的），aspect-ratio 就被完全忽略。
常见错误现象包括：
- 图片加载前高度为 0，加载后突然撑开，页面抖动
- 开发者工具里
aspect-ratio显示为 “inactive” 或灰色 - 在 Safari 15.3 及更早版本中静默失效，容器塌陷
正确做法是移除 HTML 中的 width 和 height 属性，或只保留一个（如仅 width="600"），让 aspect-ratio 有推导空间。
aspect-ratio 必须搭配哪些样式才真正生效
它不是“设了就完事”的独立属性，而是一个依赖上下文的尺寸推导机制。缺一不可：
- 外层容器（非
<img>自身）设aspect-ratio: 16/9 - 该容器必须有明确宽度来源：
width: 100%、max-width: 600px、flex: 1等 -
<img>设width: 100%+height: 100%+object-fit: cover（或contain） - 若容器是 flex item，给
<img>加display: block，避免 inline 基线间隙干扰高度 - 若父容器是 flex 或 grid，给容器加
min-width: 0和min-height: 0，否则默认的min-height: auto会压制比例计算
Flex/Grid 容器中图片仍拉伸？检查 flex-shrink 和 align-items
Flex 默认行为才是罪魁祸首：子项 flex-shrink: 1 + 父容器 align-items: stretch（默认值）会强行压缩或拉高图片盒子，object-fit 根本来不及介入。
必须同时处理两层：
- 给
<img>加flex: 0 0 auto（等价于flex-grow: 0; flex-shrink: 0; flex-basis: auto） - 确保其直接父容器（即设了
aspect-ratio的那个<div>）有 <code>min-width: 0和min-height: 0 - 避免父容器设固定
height或align-items: stretch，改用align-items: center+justify-content: center配合object-fit: contain - 用
padding-top: 56.25%（16:9）做占位，父容器设position: relative -
<img>设position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover - 务必加
padding-top: 0到@supports (aspect-ratio: 1/1)规则里，否则新旧规则叠加导致高度翻倍 - 结构统一用
<div class="ratio-box"><img></div>，CSS 中用@supports not (aspect-ratio: 1/1)包裹 padding 方案
兼容 Safari 15.3 及微信 X5 内核的 fallback 怎么写才不翻车
@supports 检测只是 CSS 层面开关，旧浏览器首次渲染时已跳过规则，容器仍为 0 高，抖动照旧。真 fallback 必须在首屏就预留空间：
最容易被忽略的是：即使你写了 aspect-ratio，如果图片是 background-image，该属性完全不适用——它只对替换元素有效。
