比率

Ratios

生成された擬似要素を使用して、選択したアスペクト比を維持するように要素を作成します。親の幅に基づいた動画やスライドショーの埋め込みを反応的に処理するのに最適です。

項目

概要

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

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

コツ! Rebootでオーバーライドしているので、<iframe>にframeborder="0"は必要ありません。

例

親要素に.ratioとアスペクト比クラスを指定して、<iframe>のような埋め込みをラップします。即時の子要素は、ユニバーサルセレクタ.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の--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 maps

_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%)
);