Ratios宽高比
Use generated pseudo elements to make an element maintain the aspect ratio of your choosing. 使用生成的伪元素使元素保持所选的宽高比。Perfect for responsively handling video or slideshow embeds based on the width of the parent.非常适合根据父对象的宽度响应处理视频或幻灯片嵌入。
About关于
Use the ratio helper to manage the aspect ratios of external content like 使用宽高比助手管理外部内容（如<iframe>s, <embed>s, <video>s, and <object>s. <iframe>、<embed>、<video>、及<object>）的宽高比。These helpers also can be used on any standard HTML child element (e.g., a 这些帮助程序还可以用于任何标准HTML子元素（例如，<div> or <img>). <div>或<img>）。Styles are applied from the parent 样式从父项的.ratio class directly to the child..ratio类直接应用到子项。
Aspect ratios are declared in a Sass map and included in each class via CSS variable, which also allows custom aspect ratios.宽高比在Sass映射中声明，并通过CSS变量包含在每个类中，CSS变量还允许自定义宽高比。
frameborder="0" on your <iframe>s as we override that for you in Reboot.<iframe>上不需要frameborder="0"，因为我们在重启动中为您覆盖了它。
Example例子
Wrap any embed, like an 在具有<iframe>, in a parent element with .ratio and an aspect ratio class. .ratio和宽高比类的父元素中包裹任何嵌入元素，如<iframe>。The immediate child element is automatically sized thanks to our universal selector 由于我们的通用选择器.ratio > *..ratio > *，直接子元素会自动调整大小。
<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:默认情况下，提供以下宽高比类别：
<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自定义宽高比
Each 每个.ratio-* class includes a CSS custom property (or CSS variable) in the selector. .ratio-*类在选择器中都包含一个CSS自定义属性（或CSS变量）。You can override this CSS variable to create custom aspect ratios on the fly with some quick math on your part.您可以覆盖这个CSS变量，通过一些快速的数学运算，动态地创建自定义宽高比。
For example, to create a 2x1 aspect ratio, set 例如，要创建2x1宽高比，请在--bs-aspect-ratio: 50% on the .ratio..ratio上设置--bs-aspect-ratio: 50%。
<div class="ratio" style="--bs-aspect-ratio: 50%;">
<div>2x1</div>
</div>This CSS variable makes it easy to modify the aspect ratio across breakpoints. 此CSS变量使跨断点修改宽高比变得容易。The following is 4x3 to start, but changes to a custom 2x1 at the medium breakpoint.以下是4x3开始，但在中等断点处更改为自定义2x1。
.ratio-4x3 {
@include media-breakpoint-up(md) {
--bs-aspect-ratio: 50%; // 2x1
}
}
<div class="ratio ratio-4x3">
<div>4x3, then 2x1</div>
</div>Sass map
Within 在_variables.scss, you can change the aspect ratios you want to use. _variables.scss中，您可以更改要使用的宽高比。Here’s our default 这是我们默认的$ratio-aspect-ratios map. $ratio-aspect-ratios映射。Modify the map as you like and recompile your Sass to put them to use.根据需要修改地图，并重新编译Sass以使用它们。
$aspect-ratios: (
"1x1": 100%,
"4x3": calc(3 / 4 * 100%),
"16x9": calc(9 / 16 * 100%),
"21x9": calc(9 / 21 * 100%)
);