Ratios
生成された擬似要素を使用して、選択したアスペクト比を維持するように要素を作成します。親の幅に基づいた動画やスライドショーの埋め込みを反応的に処理するのに最適です。
About
比率ヘルパーを使って、<iframe>、<embed>、<video>、<object> などの外部コンテンツのアスペクト比を管理します。これらのヘルパーは、標準的な HTML の子要素 (例えば、<div> や <img>) にも使用できます。スタイルは親の .reatio クラスから直接子要素に適用されます。
アスペクト比は Sass マップで宣言され、CSS 変数を介して各クラスに含まれているので、custom aspect ratios も可能です。
Example
親要素に .reatio とアスペクト比クラスを指定して、<iframe> のような埋め込みをラップします。即時の子要素は、ユニバーサルセレクタ .reatio > * のおかげで自動的にサイズが決まります。
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>Aspect ratios
アスペクト比は修飾クラスでカスタマイズできます。デフォルトでは以下の比率クラスが用意されています。
<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>Custom ratios
各 .ratio-* クラスには、セレクタに CSS のカスタム・プロパティ（または CSS 変数）が含まれています。この CSS 変数をオーバーライドして、簡単な計算でカスタムアスペクト比を作成することができます。
例えば、2x1 のアスペクト比を作成するには、.ratio の --aspect-ratio: 50% を設定します。
<div class="ratio" style="--aspect-ratio: 50%;">
<div>2x1</div>
</div>この CSS 変数は、ブレークポイント間のアスペクト比を簡単に変更できるようにします。以下は、最初は 4x3 ですが、中段のブレークポイントではカスタム 2x1 に変更されます。
.ratio-4x3 {
@include media-breakpoint-up(md) {
--aspect-ratio: 50%; // 2x1
}
}
<div class="ratio ratio-4x3">
<div>4x3, then 2x1</div>
</div>Sass map
_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%)
);