比率

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

TIP

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

親要素に ratio 属性とアスペクト比クラスを指定して、<iframe> のような埋め込みをラップします。

即時の子要素は、ユニバーサルセレクタ ratio > * のおかげで自動的にサイズが決まります。

<template>
 <b-div ratio="16x9">
  <iframe
   src="https://www.youtube.com/embed/LIlZCmETvsY"
   title="YouTube video"
   allowfullscreen
  />
 </b-div>
</template>

アスペクト比は修飾クラスでカスタマイズできます。デフォルトでは以下のratioクラスが用意されています。

<template>
 <b-div ratio="1x1">
  <b-div>1x1</b-div>
 </b-div>
 <b-div ratio="4x3">
  <b-div>4x3</b-div>
 </b-div>
 <b-div ratio="16x9">
  <b-div>16x9</b-div>
 </b-div>
 <b-div ratio="21x9">
  <b-div>21x9</b-div>
 </b-div>
</template>

各 ratio 属性には、セレクタに CSS のカスタム・プロパティ（または CSS 変数）が含まれています。

この CSS 変数をオーバーライドして、簡単な計算でカスタムアスペクト比を作成することができます。

例えば、2x1 のアスペクト比を作成するには、ratio の --bs--aspect-ratio: 50% を設定します。

<template>
 <b-div
  :ratio="50"
 >
  <b-div>2x1</b-div>
 </b-div>
</template>

この CSS 変数は、ブレークポイント間のアスペクト比を簡単に変更できるようにします。

以下は、最初は 4x3 ですが、中段のブレークポイントではカスタム 2x1 に変更されます。

<template>
 <b-div ratio="4x3">
  <b-div>4x3, then 2x1</b-div>
 </b-div>
</template>

• イメージ

• 図 Figures

• ボーダー

• シャドウ

• サイジング

• オブジェクトフィット