_aspect-ratio

アスペクト比の固定をします。

引数型初期値説明
@include _aspect-ratio($width, $height, $selector, $fit);
$widthNumber横のアスペクト比
$heightNumber縦のアスペクト比
$selectorStringnullアスペクト比を固定したい要素のセレクタ
$fitBooleanfalseアスペクト比を固定した要素を内容がはみ出す際、高さを自動調整して合わせるかどうか

YouTube動画の埋め込み

アスペクト比の固定を使うと、YouTube動画のレスポンシブ化ができます。

<div class="element">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/Bey4XXJAqS8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

.element {
  // Flexアイテムなどのように横幅が0になることがある場合は、明示的にwidthやmax-width、flexプロパティで横幅を指定する。
  @include _aspect-ratio(16, 9, '> iframe');
}

どの画面幅でも16:9のアスペクト比が保たれるようになります。

内容がはみ出す場合

アスペクト比を固定した要素内にテキストなどの流動的な内容を記述している場合、要素からはみ出すことがあります。

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。
<div class="element">
  <div class="inner">
    あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。
  </div>
</div>

.element {
  @include _aspect-ratio(3, 2, '> .inner');
}

このように3:2の要素内（青色の領域）からテキストがはみ出すと、後続の要素に重なってしまいます。

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。
<div class="element">
  あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。
</div>

.element {
  @include _aspect-ratio(3, 2, $fit: true);
}

$fit 引数を指定すると、要素内に収まりきらなくなった場合に高さが自動で伸びるようになります。