[CSS] アスペクト比を固定できるaspect-ratioプロパティの使い方

CSSのaspect-ratioプロパティを使うと、レスポンシブデザインをより簡単に実現できます。
本記事では、aspect-ratioを使った画像や背景画像のトリミング方法についてご紹介します。

aspect-ratioプロパティとは

aspect-ratioは、要素の幅と高さの比率を指定するプロパティです。
これにより、指定した比率を保ったまま、要素がリサイズされるようになります。

アスペクト比とは？

アスペクト比とは、要素の幅と高さの比率のことです。
例えば、16:9の比率は、幅が16、縦が9の比率を指します。

【代表的なアスペクト比】

アスペクト比	説明
4:3	アナログ放送時代のテレビ
3:2	一眼レフカメラ
16：9	デジタル放送テレビやYouTube等の動画
1:1	正方形。インスタグラムやバナー広告など
1.414:1	白銀比。縦横比が変わらない印刷物の用紙規格
1.618:1	黄金比。最も美しいとされる比率

aspect-ratioの使い方

aspect-ratioは、幅と高さの比率をスラッシュ（/）で区切って指定します。

img画像をトリミングする

・html

 
・css

aspect-ratioとobject-fit: coverを組み合わせることで、任意のアスペクト比で画像をトリミングできます。

背景画像をトリミングする

・html

 
・css

デモ

従来の padding-top を使ってアスペクト比を保持する方法

これまで、任意のアスペクト比で画像をトリミングする際は、次のように計算したアスペクト比をpadding-topで保持する方法が主流でした。
 

・html

 

css

 

aspect-ratioの登場で、より直感的に、簡潔に、コーディングしやすくなりました。