比率

使用生成的伪元素使元素保持你选择的纵横比。非常适合根据父元素的宽度响应式处理视频或幻灯片嵌入。

关于

🌐 About

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

🌐 Use the ratio helper to manage the aspect ratios of external content like <iframe>s, <embed>s, <video>s, and <object>s. These helpers also can be used on any standard HTML child element (e.g., a <div> or <img>). Styles are applied from the parent .ratio class directly to the child.

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

🌐 Aspect ratios are declared in a Sass map and included in each class via CSS variable, which also allows custom aspect ratios.

专业提示！ 你不需要在你的 <iframe> 上使用 frameborder="0"，因为我们在 Reboot 中会为你覆盖它。

示例

🌐 Example

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

🌐 Wrap any embed, like an <iframe>, in a parent element with .ratio and an aspect ratio class. The immediate child element is automatically sized thanks to our universal selector .ratio > *.

html

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

纵横比

🌐 Aspect ratios

宽高比可以通过修改类进行自定义。默认提供以下比率类：

🌐 Aspect ratios can be customized with modifier classes. By default the following ratio classes are provided:

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>

定制比例

🌐 Custom ratios

每个 .ratio-* 类在选择器中包含一个 CSS 自定义属性（或 CSS 变量）。你可以覆盖这个 CSS 变量，通过你的一些快速计算即时创建自定义的宽高比。

🌐 Each .ratio-* class includes a CSS custom property (or CSS variable) in the selector. You can override this CSS variable to create custom aspect ratios on the fly with some quick math on your part.

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

🌐 For example, to create a 2x1 aspect ratio, set --bs-aspect-ratio: 50% on the .ratio.

2x1

html

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

这个 CSS 变量使得在不同断点修改长宽比变得很容易。下面的示例初始为 4x3，但在中等断点时会更改为自定义的 2x1。

🌐 This CSS variable makes it easy to modify the aspect ratio across breakpoints. The following is 4x3 to start, but changes to a custom 2x1 at the medium breakpoint.

.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 映射

🌐 Sass maps

在 _variables.scss 中，你可以更改你想使用的纵横比。这里是我们的默认 $ratio-aspect-ratios 映射。根据需要修改映射并重新编译你的 Sass 以使用它们。

🌐 Within _variables.scss, you can change the aspect ratios you want to use. Here’s our default $ratio-aspect-ratios map. Modify the map as you like and recompile your Sass to put them to use.

scss/_variables.scss

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