CSSのaspect-ratioプロパティがすべてのブラウザにサポートされました、画像をアスペクト比で実装する今までとこれからの実装方法

先日アップデートされたSafari 15とSamsung Internet 15により、すべてのエバーグリーンブラウザでaspect-ratioプロパティがサポートされました。
※エバーグリーンとは、最新版に自動アップデートされるブラウザのことです。

aspect-ratioプロパティを使用することで、レスポンシブ対応の画像をアスペクト比を維持したまま簡単に実装できます。
CSSでアスペクト比を実装する今までとこれからの実装方法を紹介します。

CSSのaspect-ratioプロパティの使い方、画像をアスペクト比で実装する今までとこれからの実装方法

CSS ways to Create Fixed Aspect Ratio

aspect-ratioプロパティとは

aspect-ratioプロパティは名前の通り、アスペクト比を定義できるCSSのプロパティです。2021年1月にChromeでサポートされ、その後Firefox, Edgeでサポートされ、先日すべてのエバーグリーンブラウザでサポートされました。

サイトのキャプチャ

aspect-ratioプロパティのサポートブラウザ

aspect-ratioプロパティは、ratio値(幅対高さのアスペクト比)を定義して使用します。

詳しくは、下記をご覧ください。

Padding Hack

これは古いテクニックで、画像をレスポンシブ対応にするために、アスペクト比を使用します。アスペクト比を使用することで、特定の比率サイズを設定して、残りの部分は軸の高さ(または幅)に基づいて表示させます。

親コンテナと絶対配置された子コンテナが必要で、アスペクト比をパーセントで計算してpadding-topに定義します。

2. Viewport width solution

Padding Hackと同様のコンセプトで、こちらはheightの値に、アスペクト比をパーセントで計算してvw単位に定義します。

3. aspect-ratioプロパティ

2021年現在、すべてのブラウザにサポートされたaspect-ratioプロパティを使用すると、アスペクト比をそのまま定義して使用できます。

前述のCSSで、padding-top: 56.25%;height: 17.4375vw;aspect-ratio: 16 / 9;に置き換え、画像のアスペクト比を保つことができます。

padding-topの代わりに、aspect-ratioを使用する方が分かりやすく、paddingプロパティをオーバーホールして通常の範囲外のことをすることもありません。

デモ

実際の動作は、デモでご覧ください。

See the Pen
CSS ways to Create Fixed Aspect Ratio
by Elad Shechter (@elad2412)
on CodePen.

元ツイートは下記より。

sponsors

top of page

©2021 coliss