正确用法是用包裹嵌入内容，子元素加w-100 h-100及position-absolute等定位类；ratio类依赖伪元素padding-top撑高，仅对块级容器生效，不可直接作用于iframe/video，且需配对使用基础类与比例类。
直接用 <div class="ratio ratio-16x9"> 包裹嵌入内容（如 iframe、video、img），再给子元素加 <code>w-100 h-100 和必要定位类，就能稳住宽高比。核心不是“拉伸内容”，而是靠父容器预留空间、子元素填满覆盖。
必须用 div 容器包裹，不能直接加在 iframe 或 video 上
ratio 类只对块级容器生效，内部靠 ::before 伪元素的 padding-top 撑出高度。如果写成：
-
<iframe class="ratio ratio-16x9"></iframe>→ 完全无效，iframe 不是容器，也不支持 padding-top 布局 -
<div class="ratio-16x9"><iframe></iframe></div>→ 缺少ratio基类，CSS 变量未定义，高度塌陷 - 正确写法：
<div class="ratio ratio-16x9"><iframe class="w-100 h-100"></iframe></div>
子元素要占满且脱离文档流
ratio 容器留出空间后，子元素必须精准覆盖，否则会留白、错位或溢出：
- iframe 或 video 必须加
class="w-100 h-100 position-absolute top-0 start-0" - 图片可加
object-fit: cover防拉伸，推荐写成class="w-100 h-100" style="object-fit: cover;" - 务必删掉 iframe 的
width="560" height="315"等行内尺寸属性，它们会覆盖 CSS
比例类要配对使用，不能单独写
ratio 是基础修饰类，ratio-16x9 或 ratio-4x3 才提供具体比例值：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
-
ratio-16x9对应--bs-aspect-ratio: 56.25%（即 9 ÷ 16） -
ratio-4x3对应--bs-aspect-ratio: 75%（即 3 ÷ 4） - 自定义比例（如 9:16）可加
style="--bs-aspect-ratio: 9/16;"或定义新类.ratio-9x16 { --bs-aspect-ratio: 9/16; }
注意动态场景下的渲染时机
在 Tab 切换、Modal 弹出或 display: none 区域里初始化 ratio，容易高度为 0：
- 避免在隐藏状态提前挂载，改用
visibility: hidden或延迟到显示后再插入 DOM - Tab 切换后可手动触发重绘：
element.offsetHeight或加style="transform: translateZ(0)" - 确保父容器（如
col）有明确宽度，不要被 flex 压缩到 0
