长宽比（Ratio）

使用产生的伪元素使元素保持您选择的长宽比。非常适合根据父对象的宽度响应处理视频或嵌入幻灯片。

On this page

关于

使用ratio工具来管理外嵌内容，例如iframe、embed、video和object。这些工具还可用于任何标准HTML子元素（例如：div或img）。样式会从.ratio类别直接应用于子项。

长宽比被宣告在Sass map内，并经由CSS变数包含在每个类别中，也允许自定义长宽比。

专业提醒！ 您不需要在iframe上使用frameborder=“0”因为我们在Reboot为您复写了它。.

示例

将所有嵌入如iframe包在带有.ratio和长宽比class的父元素中。我们的通用选择器.ratio > *会自动调整直接子元素的大小。 

<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
<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上设置--aspect-ratio: 50%。

2x1
<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
<div class="ratio ratio-4x3">
        <div>4x3, then 2x1</div>
        </div>

Sass map

在_variables.scss中，您可以更改要使用的长宽比。以下是我们的预设的$ratio-aspect-ratios map。根据需要修改map，然后重新编译Sass使其运作。

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