比率

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

このページの内容

概要

比率ヘルパーを使用して、<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%)
);