比率 Ratios

生成された疑似要素を使用して、選択したアスペクト比を要素に維持させます。親の幅に基づいてビデオやスライドショーの埋め込みをレスポンシブに処理するのに最適です。

On this page

概要

ratioヘルパーを使用して、<iframe>、<embed>、<video>、<object>などの外部コンテンツのアスペクト比を管理します。これらのヘルパーは、任意の標準HTML子要素（例：<div>や<img>）でも使用できます。スタイルは親の.ratioクラスから子要素に直接適用されます。

アスペクト比はSassマップで宣言され、CSS変数を介して各クラスに含まれるため、カスタムアスペクト比も可能です。

プロのヒント！ <iframe>にframeborder="0"は必要ありません。Rebootでそれを上書きしています。

例

<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, then 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%)
);