aspect-ratio必须作用于外层块级容器而非或，因二者是替换元素，其尺寸由内容或内联属性决定，该属性无法触发布局约束；生效需同时满足：容器为块级/弹性/网格子项、有明确宽度且未声明height，并配合object-fit与width:100%;height:100%。
aspect-ratio 必须作用在容器上，直接写在 <img alt="HTML中使用aspect-ratio属性保持元素宽高比的用法" > 或 <video></video> 上基本无效——这不是 bug，是规范行为。
为什么aspect-ratio写在<img alt="HTML中使用aspect-ratio属性保持元素宽高比的用法" >上不生效
<img alt="HTML中使用aspect-ratio属性保持元素宽高比的用法" > 是替换元素（replaced element），其渲染尺寸由内容 intrinsic 尺寸或显式 width/height 属性决定，aspect-ratio 在它上面无法触发布局约束。实测常见现象包括：
- 高度塌陷（尤其懒加载后留白）
- 在
flex或grid容器中比例丢失 - Safari 15.3 及更早版本完全忽略该声明
- Chrome 虽可能“看起来正常”，但本质是回退到 intrinsic 尺寸，不可靠
容器上设置aspect-ratio的三个硬性条件
只有同时满足以下三点，aspect-ratio 才会真正计算并应用高度：
- 容器必须是块级、
flex子项或grid子项（如display: block、display: flex） - 容器必须有明确宽度来源：比如
width: 100%、max-width: 600px、flex-basis等 - 容器不能声明
height（包括height: auto，CSS 优先级规则下会跳过aspect-ratio）
语法也容易出错：aspect-ratio: 16 / 9（斜杠前后各一个空格），不能写成 16/9、16:9 或 16/9px；支持小数但推荐分数形式，避免浮点误差。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
object-fit不是可选项，而是必配项
aspect-ratio 只管容器“该多高”，不管里面图片怎么铺。没配 object-fit，<img alt="HTML中使用aspect-ratio属性保持元素宽高比的用法" > 默认拉伸填充，极易糊掉或裁半。
-
object-fit: cover：填满容器，可能裁边；适合封面图、海报 -
object-fit: contain：完整显示，留白；适合图标、证件照 -
<img alt="HTML中使用aspect-ratio属性保持元素宽高比的用法" >必须加width: 100%; height: 100%，否则object-fit不触发 - 安卓 WebView（尤其 UC、旧版 Samsung Browser）对
object-fit支持不稳定，真机测试不可跳过
兼容 Safari 15.3 及更早版本的降级方案
如果项目仍需支持 macOS Monterey（Safari 15.3）或某些企业内网环境，aspect-ratio 必须 fallback 到 padding-bottom hack：
- 父容器设
position: relative; width: 100%; height: 0 - 用公式
padding-bottom: calc((原始高度 / 原始宽度) * 100%)，例如 800×600 →75% -
<img alt="HTML中使用aspect-ratio属性保持元素宽高比的用法" >设position: absolute; top: 0; left: 0; width: 100%; height: 100% - 别用文件名猜比例（
cover-16x9.jpg不代表就是 16:9），要用真实尺寸或 CMS 输出的元数据
真正起效的路径只有一条：外层块级容器 + 明确宽度来源 + 无 height 声明 + aspect-ratio + object-fit 配合。漏掉任意一环，都可能在某个设备或浏览器里突然失效。
