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

Post on:2021年10月13日

aspect-ratioプロパティとは

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

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

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

.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.container {

width: 100%;

aspect-ratio: 16 / 9;

}

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

Padding Hack

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

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

.padding-hack {
  position: relative;
  width: 31vw;
  padding-top: 56.25%; 
  /* calculating 16/9 ratio --- 9 / 16 * 100% = 56.25% */
}

.padding-hack iframe {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0; 
  right: 0;
  width: 100%;
  height: 100%;
}

.padding-hack {

position: relative;

width: 31vw;

padding-top: 56.25%;

/* calculating 16/9 ratio --- 9 / 16 * 100% = 56.25% */

}

.padding-hack iframe {

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

width: 100%;

height: 100%;

}

2. Viewport width solution

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

.vw-solution {
  width: 31vw;
  height: 17.4375vw; 
  /* calculating 16/9 ratio ---- 31vw / 16 * 9 = 17.4375vw */
}

.vw-solution {

width: 31vw;

height: 17.4375vw;

/* calculating 16/9 ratio ---- 31vw / 16 * 9 = 17.4375vw */

}

3. aspect-ratioプロパティ

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

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

.aspect-ratio {
  width: 31vw;
  aspect-ratio: 16 / 9;
  /* aspect-ratio auto calculating 16/9 ratio */
}

.aspect-ratio {

width: 31vw;

aspect-ratio: 16 / 9;

/* aspect-ratio auto calculating 16/9 ratio */

}

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

デモ

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

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

元ツイートは下記より。

🤩 The #CSS property 'aspect-ratio' is now supported in all evergreen browsers!

* The last two browsers, Safari 15 and Samsung Internet 15 (updated today) , are now supporting this feature.@CodePen:https://t.co/mekJTddsLC pic.twitter.com/HReNQzzuPs

— Elad Shechter (@eladsc) September 29, 2021