比率

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

このページでは

約

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

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

プロのヒント！Rebootでオーバーライドするため frameborder="0"、 sは必要ありません。 <iframe>

例

のような埋め込みを、縦横比クラス<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 の縦横比を作成するには、に設定--bs-aspect-ratio: 50%し.ratioます。

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>

サスマップ

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