比例（Ratios）

使用產生的偽元素讓元素維持您選擇的長寬比。非常適合根據父元素寬度響應式處理影片或投影片嵌入。

本頁內容

關於（About）

使用比例輔助類別來管理外部內容的長寬比，如 <iframe>、<embed>、<video> 和 <object>。這些輔助類別也可以用於任何標準 HTML 子元素（例如 <div> 或 <img>）。樣式從父元素 .ratio 類別直接套用到子元素。

長寬比在 Sass map 中宣告，並透過 CSS 變數包含在每個類別中，這也允許自訂長寬比。

專業提示！ 您的 <iframe> 不需要 frameborder="0"，因為我們在 Reboot 中已為您覆寫了它。

範例（Example）

將任何嵌入內容（如 <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>

長寬比（Aspect ratios）

長寬比可以使用修飾類別進行自訂。預設提供以下比例類別：

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 變數，透過您自己的簡單計算即時建立自訂長寬比。

例如，要建立 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 maps

在 _variables.scss 中，您可以變更想要使用的長寬比。以下是我們預設的 $ratio-aspect-ratios map。根據您的需要修改這個 map 並重新編譯您的 Sass 以使用它們。

scss/_variables.scss

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