比率ヘルパー（Ratios） v5.0.0設定変更、クラス名変更 v5.0.0動画の埋め込みより名称変更

概要（About）

比率ヘルパーを使用して、<iframe>, <embed>, <video>, <object> などの外部コンテンツのアスペクト比を管理。これらのヘルパーは、デフォルトのHTML子要素（<div> や <img> など）でも使用できる。スタイルは、親要素の .ratio クラスから子に直接適用。

アスペクト比はSassマップで宣言され、CSS変数を経由して各クラスに組み込まれるため、カスタムのアスペクト比も使用できる。

実例（Example）v5.0.0-alpha2設定変更

<iframe> などの埋め込みを、.ratio とアスペクト比のクラスを持つ親要素で囲む。ユニバーサルセレクタ .ratio > * により、直接の子要素のサイズが自動的に設定される。

見本

Bootstrap5.xの設定例 緑背景が変更箇所

<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTubeビデオ" allowfullscreen></iframe>
</div>

※Bootstrap4.xの設定例 赤背景が変更箇所

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTubeビデオ" allowfullscreen></iframe>
</div>

アスペクト比（Aspect ratios）v5.0.0-alpha2クラス名変更

アスペクト比は、修飾子クラスでカスタマイズできる。デフォルトでは、以下の比率クラスを提供：

見本 見やすいよう色と枠を付けています

設定例

<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）v5.0.0-alpha2新設、v5.0.0-beta2変更

各 .ratio-* クラスには、セレクタにCSSカスタムプロパティ（またはCSS変数）が組み込まれている。このCSS変数を再定義して、カスタムアスペクト比をその場で作成すれば、簡単な計算ができる。

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

見本 見やすいよう色と枠を付けています

設定例

<div class="ratio" style="--bs-aspect-ratio: 50%;">
  <div>2x1</div>
</div>

このCSS変数を使用すると、ブレークポイント全体のアスペクト比が簡単に変更できる。以下は極小では4x3だが、中程度のブレークポイントで2x1に変更するカスタム方法。

見本 見やすいよう色と枠を付けています

設定例

Sass.ratio-4x3 {
  @include media-breakpoint-up(md) {
    --bs-aspect-ratio: 50%; // 2x1の設定
  }
}

HTML<div class="ratio ratio-4x3">
  <div>4x3, 次に 2x1</div>
</div>

CSS v5.3.0Sassから名称変更

Sassループ（Sass loops)

デフォルトの設定

scss/helpers/_ratio.scss 内 の設定@each $key, $ratio in $aspect-ratios {
  .ratio-#{$key} {
    --#{$prefix}aspect-ratio: #{$ratio};
  }
}

Sassマップ（Sass maps）v5.2.0設定変更

scss/_variables.scss 内で使用するアスペクト比が変更できる。以下は $ratio-aspect-ratios マップの例。必要に応じてマップを変更し、Sassを再コンパイルすれば使用できる。

デフォルトの設定

scss/_variables.scss 内 aspect-ratios の設定$aspect-ratios: (
  "1x1": 100%,
  "4x3": calc(3 / 4 * 100%),
  "16x9": calc(9 / 16 * 100%),
  "21x9": calc(9 / 21 * 100%)
);