跳到主要內容 跳到文檔導航
in English

比率

使用生成的偽元素使元素保持您選擇的縱橫比。非常適合根據父項的寬度響應式處理視頻或幻燈片嵌入。

關於

使用比率助手來管理外部內容的縱橫比,如<iframe>s、<embed>s、<video>s 和<object>s。這些助手也可以用於任何標準的 HTML 子元素(例如 a<div><img>)。樣式從父.ratio類直接應用到子類。

縱橫比在 Sass 映射中聲明並通過 CSS 變量包含在每個類中,這也允許自定義縱橫比

專家提示!您不需要 frameborder="0"在您 的 s 上,因為我們會在Reboot<iframe>中為您覆蓋它 。

例子

使用和縱橫比類將任何嵌入(如<iframe>)包裝在父元素中。.ratio由於我們的通用選擇器,直接子元素會自動調整大小.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 縱橫比,--bs-aspect-ratio: 50%請在.ratio.

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

薩斯地圖

在 內_variables.scss,您可以更改要使用的縱橫比。這是我們的默認$ratio-aspect-ratios地圖。根據需要修改地圖並重新編譯 Sass 以使用它們。

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