aspect-ratioでアスペクト比を固定する

環境

• Windows10
• Chrome93

Chromeでは88から、Firefoxでは89から、Safariは15からです。

aspect-ratio

今回は16:9にします

<div class="container"></div>

.container {
  aspect-ratio: 16 / 9
}

これだけです。とても簡単。

Safariでも使えるようになりました。

未対応ブラウザ

方法1

<div class="container"></div>

.container {
  position: relative
}

# container::before {
  content:"";
  display: block;
  padding-bottom: 56.25%; /*  height(9) / width(16) * 100  */
}

少し使い勝手が悪いです。

方法2

16:9 = w:h
 16h = 9w
   h = 9w / 16

とかいう等式変形で

.container {
  width: 100vw; /* (任意のwidth(100%とかは無理そう)) */
  height: calc(9 * 100vw / 16);
}

こんな感じでいけます。

まとめ

aspect-ratioがおすすめ