BS5 Ratio 响应式比例容器
学习使用 Ratio 组件创建固定宽高比的嵌入容器，用于视频或图片。 · 难度：入门 · +15XP
Ratio 简介
Ratio 是 Bootstrap 5 的实用工具，用于创建保持特定宽高比的容器，避免内容变形。常用于嵌入 YouTube 视频或响应式图片。
可用比例
| 类名 | 比例 |
|---|---|
.ratio-1x1 | 1:1 正方形 |
.ratio-4x3 | 4:3 标准屏幕 |
.ratio-16x9 | 16:9 宽屏 |
.ratio-21x9 | 21:9 超宽 |
代码示例
<div class='ratio ratio-16x9'>
<iframe src='https://www.youtube.com/embed/dQw4w9WgXcQ' title='视频' allowfullscreen></iframe>
</div>练习提示
在右侧代码中，替换 iframe 为一个 img 标签，并尝试不同的比例类（如 ratio-4x3）来观察图片如何自适应。