View on GitHub

Ratios (比例)

使用產生的偽元素使元素保持您選擇的長寬比。非常適合根據父對象的寬度響應處理影片或嵌入幻燈片。

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>

長寬比

可以使用修飾符 class 自定義長寬比。預設情況下，提供以下比率類別：

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 但在 medium 斷點處更改為自定義的 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%)
);