長寬比（Ratio）
使用產(chǎn)生的偽元素使元素保持您選擇的長寬比。非常適合根據(jù)父對象的寬度響應處理視頻或嵌入幻燈片。
On this page
關于
使用ratio工具來管理外嵌內容，例如iframe、embed、video和object。這些工具還可用于任何標準HTML子元素（例如：div或img）。樣式會從.ratio類別直接應用于子項。
長寬比被宣告在Sass map內，并經(jīng)由CSS變數(shù)包含在每個類別中，也允許自定義長寬比。
專業(yè)提醒！ 您不需要在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變數(shù)）。您可以重寫此CSS變數(shù)，以快速創(chuàng)建自定義的寬高比，同時還需要進行一些數(shù)學運算。
例如，要創(chuàng)建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。根據(jù)需要修改map，然后重新編譯Sass使其運作。
$aspect-ratios: (
"1x1": 100%,
"4x3": calc(3 / 4 * 100%),
"16x9": calc(9 / 16 * 100%),
"21x9": calc(9 / 21 * 100%)
);