aspect-ratio 生效需同时满足三个条件：容器为块级/flex/grid子项、有明确宽度来源、未声明任何height值；语法必须为“16 / 9”格式，且不能用于img自身。
aspect-ratio 能直接生效，但只在容器上写它，90% 的情况会失效——不是属性错了，是没满足它的三个硬性条件。
为什么 aspect-ratio: 16 / 9 写了却没反应
最常见原因是：容器同时声明了 height（哪怕 height: auto），或者宽度来源不明确。浏览器看到 height 就直接跳过 aspect-ratio 的高度计算逻辑。
- 容器必须是块级、
flex子项或grid子项（display: block、display: flex等） - 容器必须有明确宽度来源：比如
width: 100%、max-width: 600px、flex-basis，不能靠内容撑开 - 容器不能声明任何
height值（包括height: auto、height: 100%） - 语法必须带空格：
aspect-ratio: 16 / 9，写成16/9或16:9都无效
怎么让 img 在纵横比容器里不拉伸、不留白
别给 <img> 自身加 aspect-ratio——它是替换元素，该属性在它身上基本不触发布局约束，反而容易和 intrinsic 尺寸冲突。
- 把
aspect-ratio放在外层容器上，例如<div class="ratio-container"><img></div> -
<img>必须设width: 100%和height: 100%，否则object-fit不生效 - 必须显式声明
object-fit: cover或object-fit: contain，默认行为是拉伸变形 - 避免用 HTML 属性写
width或height（如<img width="800" height="450">），SSR 渲染时会覆盖容器比例
兼容 Safari 15.3 及更早版本的 fallback 写法
旧版 Safari 不支持 aspect-ratio，且对 padding-bottom fallback 的解析很敏感——顺序错了就会失效。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 现代写法优先，
padding-bottom仅作降级：先写aspect-ratio，再写padding-bottom - 正确顺序示例：
.ratio-16x9 {<br> width: 100%;<br> aspect-ratio: 16 / 9;<br> padding-bottom: 56.25%; /* 仅在不支持者中生效 */<br>} - 子元素需配合
position: absolute; top: 0; left: 0; width: 100%; height: 100%，否则padding-bottom撑开的高度会被内容顶出 - 如果项目必须支持 iOS 14.5 之前设备，建议整套用
padding-bottom+ 绝对定位，不混用aspect-ratio
自定义非标比例（如 21 / 9 或 2.35 / 1）
内置类只覆盖常见比例，自定义必须用分数字符串，且不能含空格或单位。
- 直接内联：
style="--aspect-ratio: 21 / 9"（注意斜杠前后各一个空格） - 或提取为 CSS 类：
.ratio-21x9 { --aspect-ratio: 21 / 9; }，再搭配aspect-ratio使用 - 小数也支持，但推荐分数：如
2.35 / 1写成235 / 100更稳妥，避免浮点误差 - Bootstrap 5 用户注意：它用的是
--bs-aspect-ratio变量，不是标准--aspect-ratio
真正卡住人的从来不是怎么写 aspect-ratio，而是它生效前那三个“看不见”的前提：块级、有宽、无高——漏掉任意一个，代码就停在原地不动。
