比例

使用產生的偽元素讓元素維持您選擇的外觀比例。非常適合根據父項寬度來回應式地處理影片或幻燈片嵌入。

在此頁面上

關於

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

外觀比例會在 Sass 地圖中宣告，並透過 CSS 變數包含在每個類別中，這也允許自訂外觀比例。

專業提示！您不需要在 <iframe> 上使用 frameborder="0"，因為我們會在重新啟動中為您覆寫它。

範例

將任何嵌入式元素（例如 <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>

長寬比

長寬比可以使用修改器類別自訂。預設提供下列長寬比類別

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>

自訂長寬比

每個 .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，然後 2x1

html

<div class="ratio ratio-4x3">
  <div>4x3, then 2x1</div>
</div>

Sass 地圖

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

scss/_variables.scss

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