比例（Ratios）

使用生成的伪元素，让元素保持您所选择的长宽比。非常适合根据父元素的宽度来响应式地处理视频或幻灯片嵌入。

On this page

关于

使用比例助手管理外部内容（如<iframe>、 <embed>、 <video> 和 <object>）的宽高比。这些辅助工具也可用于任何标准 HTML 子元素（如 <div> 或 <img>）。样式会从父元素 .ratio 类直接应用到子元素。

高宽比在 Sass 映射中声明，并通过 CSS 变量包含在每个类中，还允许自定义高宽比。

专业提示！ 您不需要在您的 <iframe> 上使用 frameborder="0" ，因为我们在 [Reboot] 中为您覆盖了这一功能(/manual/bootstrap5/zh/docs/5.3/content/reboot/)。

示例

将任何嵌入元素（如<iframe>）包裹在带有.ratio 和宽高比类的父元素中。由于我们的通用选择器.ratio > *，直接子元素会自动调整大小。

html

<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>

长宽比

可以使用修改器类别自定义纵横比。默认情况下提供以下比例类别：

1x1

4x3

16x9

21x9

html

<div class="ratio ratio-1x1">
  <div>1x1</div>
</div>
<div class="ratio ratio-4x3">
  <div>4x3</div>
</div>
<div class="ratio ratio-16x9">
  <div>16x9</div>
</div>
<div class="ratio ratio-21x9">
  <div>21x9</div>
</div>

自定义比率

每个 .ratio-* 类的选择器中都包含一个 CSS 自定义属性（或 CSS 变量）。您可以重写这个 CSS 变量，通过快速运算来创建自定义宽高比。

例如，要创建 2x1 宽高比，请在 .ratio 上设置 --bs-aspect-ratio: 50% 。

2x1

html

<div class="ratio" style="--bs-aspect-ratio: 50%;">
  <div>2x1</div>
</div>

通过这个 CSS 变量，可以轻松修改各断点的宽高比。下图一开始是 4x3，但在中断点处会变为自定义的 2x1。

.ratio-4x3 {
  @include media-breakpoint-up(md) {
    --bs-aspect-ratio: 50%; // 2x1
  }
}

4x3, then 2x1

html

<div class="ratio ratio-4x3">
  <div>4x3, then 2x1</div>
</div>

Sass 映射

在 _variables.scss中，您可以更改要使用的宽高比。下面是我们默认的 $ratio-aspect-ratios 地图。请根据自己的喜好修改映射，然后重新编译 Sass 以使用它们。

scss/_variables.scss

$aspect-ratios: (
  "1x1": 100%,
  "4x3": calc(3 / 4 * 100%),
  "16x9": calc(9 / 16 * 100%),
  "21x9": calc(9 / 21 * 100%)
);