比率
生成された疑似要素を使用して、選択したアスペクト比を維持する要素を作成します。親の幅に基づいてビデオまたはスライドショーの埋め込みをレスポンシブに処理するのに最適です。
約
<iframe>
比率ヘルパーを使用して、s 、<embed>
s、s、s<video>
などの外部コンテンツの縦横比を管理し<object>
ます。<div>
これらのヘルパーは、標準の HTML 子要素 (aや など)でも使用できます<img>
。スタイルは、親.ratio
クラスから子クラスに直接適用されます。
アスペクト比は Sass マップで宣言され、CSS 変数を介して各クラスに含まれます。これにより、カスタム アスペクト比も可能になります。
例
のような埋め込みを、縦横比クラス<iframe>
を持つ親要素でラップします。.ratio
直接の子要素は、ユニバーサル セレクターのおかげで自動的にサイズ変更されます.ratio > *
。
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>
アスペクト比
縦横比は修飾子クラスでカスタマイズできます。デフォルトでは、次の比率クラスが提供されます。
<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
ます。
<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
}
}
<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%)
);