CSSのaspect-ratioを使ってDOMの縦横比を指定する 📺

これまで、アスペクト比を固定しつつサイズ可変のDOMをつくる際は、before要素のpadding-topを使ってました。

DEMO

ソースコード（抜粋）

SCSS

div {
  width: 50%;
  background: red;
  
  &:before {
    display: block;
    padding-top: calc(100% * 9 / 16);
    content: '';
  }
}

paddingを相対的に指定した場合は、親要素の幅に対する割合になるため、この書き方で親要素に対し、幅半分の16:9のDOMを作ることができます。

しかし、最近何気なく developer.mozilla.org を眺めていたら、 aspect-ratio たるプロパティを見つけました。

DEMO

ソースコード（抜粋）

SCSS

div {
  width: 50%;
  aspect-ratio: 16 / 9;
  background: red;
}

ものすごく直感的に指定できますし、生成されるDOMも使いやすくてすごく便利です。
iOS15以降であれば動作するようなのですが、念の為手元の環境で試してみました。普通に動いたので実戦投入しても良さそうです。

確認した環境

スマートフォン

• Safari（iOS 16.2）
• Safari（iOS 15.7）
• Google Chrome（Android 12）

パソコン

• Google Chrome（109）
• Firefox（105）
• Safari（16.2）

で動作確認しました。