aspect-ratio必须作用于外层块级/弹性/网格容器，不能直接写在或上，因其是替换元素，无法触发布局计算；需配合width/max-width、height未声明及object-fit才能生效。
aspect-ratio 能用，但直接写在 上基本等于没写——尤其在 Safari 15.3 及更早版本里，它会彻底被忽略。
为什么 aspect-ratio 写在 ![]()
aspect-ratio 在它上面无法触发布局计算。常见现象包括：
- 高度塌陷成 0，只留一条水平线
- 懒加载后容器突然“跳高”，页面抖动
- 在 Flex 容器中比例丢失，
flex-basis覆盖了aspect-ratio - 显式写了
height: auto或height: 100%，导致aspect-ratio被跳过（CSS 优先级规则下，height 声明会阻断 aspect-ratio 的高度推导）
真正起效的写法：必须套一层容器
只有外层块级/弹性/网格子项容器满足三个条件时，aspect-ratio 才会算出高度并应用：
- 设为
display: block、display: flex或display: grid子项 - 有明确宽度来源：比如
width: 100%、max-width: 600px、flex-basis: 300px - 不能声明
height（哪怕height: auto也不行）
语法也得严格：aspect-ratio: 16 / 9（斜杠前后各一个空格），不能写成 16/9、16:9 或 16/9px。
object-fit 不是可选，是必配
aspect-ratio 只管“容器该多高”，不管里面的内容怎么放。没配 object-fit，
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 加
width: 100%; height: 100%到object-fit不触发 -
object-fit: cover：填满，可能裁边；适合封面图 -
object-fit: contain：完整显示，留白；适合证件照 - 别用
fill——就是变形专用属性
安卓 WebView（尤其是 UC、旧版 Samsung Browser）对 object-fit 支持不稳定，真机测试不能跳过。
兼容 Safari 15.3 及更早的降级方案
如果项目仍需支持 macOS Monterey（Safari 15.3）或某些企业内网环境，必须 fallback 到 padding-bottom hack：
- 父容器设
position: relative; width: 100%; height: 0; - 计算
padding-bottom: calc((原始高度 / 原始宽度) * 100%)，例如 800×600 →75% -
position: absolute; top: 0; left: 0; width: 100%; height: 100%
这个技巧至今在所有浏览器里都稳，但它要求子元素必须绝对定位——一旦忘了加 position: absolute，整个结构就塌了，这点容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
