aspect-ratioで縦横比を固定しよう

このレッスンでは、aspect-ratioを使った縦横比の固定方法を学び、画面サイズが変わっても崩れないレイアウトを作れるようになることを目標にします。「CSS aspect-ratio 使い方」で調べている方向けです。

aspect-ratio: 幅 / 高さを指定すると、画面サイズが変わっても要素の縦横比を一定に保てます。動画や画像の枠を「16:9」のような比率できれいに保ちたいときに便利です。

サンプルコードでは、.boxにaspect-ratio: 16 / 9;を指定し、width: 100%; max-width: 300px;と組み合わせています。画面幅を変えて要素の横幅が変わっても、常に縦横比が16:9に保たれる様子を確認してみましょう。

初心者がよくつまずくのが、以前の書き方(paddingの割合を使ったテクニック)との違いです。以前はpaddingの割合計算などの複雑なテクニックが必要でしたが、この1行で簡単に指定できるようになりました。古い記事の情報を参考にすると、必要以上に複雑な書き方をしてしまうことがあります。

レスポンシブなサムネイルやカード画像のレイアウトを組む際によく使われ、コードもすっきりします。動画埋め込みの枠を作る際にも、このプロパティが標準的に使われるようになっています。