メインコンテンツにスキップ ドキュメント ナビゲーションにスキップ
Check
in English

比率

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

このページでは

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