aspect-ratio で要素のアスペクト比を指定する

Design Div 所属フロントエンドエンジニアの上垣です。

この記事では、css の aspect-ratio プロパティを使って、要素のアスペクト比を指定する方法を紹介します。

padding hack

width が可変の要素に、特定の割合で高さを与える(=アスペクト比を決める) には、 padding hack という手法が良く使われていました。

See the Pen Untitled by Koji (@kjugk) on CodePen.

垂直方向の padding を % で指定すると、包含ブロックの幅に対する相対値が適用されることを利用して、before 疑似要素の padding で高さを確保し、要素のアスペクト比を決めています。

.fourToThree::before {
  padding-top: calc(calc(3 / 4) * 100%);
  background-color: skyblue;
}

この手法はとても良く機能しますが、少なくともこんな便利なサービスが作られるくらい、記述量が多くて可読性も低いのは、実装したことがある人ならわかるかと思います。

同じレイアウトを、aspect-ratio を使って記述してみます。

See the Pen aspect-ratio by Koji (@kjugk) on CodePen.

aspect-ratio: width / height; を追加するだけで、要素のアスペクト比を指定することができました。 padding hack と比べると可読性が格段に向上していますし、DOM もシンプルになっています。

Web ページ内で、特定のアスペクト比で表示したい要素として真っ先に思い浮かぶのは、やはり画像になると思います。

例えば、aspect-ratio と object-fit :cover を組み合わせて使うと、画像のオリジナルサイズを無視して、特定のアスペクト比で画像を表示できます。これなら、わざわざサムネイル用に画像を切り出さなくても、良い感じのリストが作れますね✌️

(写真は先日のワーケーションのもので iPhone で撮影しています。)

See the Pen Untitled by Koji (@kjugk) on CodePen.

他には、画像付きのカードコンポーネントや、ロゴ画像のリストなんかにも応用できそうです。

aspect-ratio プロパティの値は、幅(number) / 高さ(number) もしくは、割合を表す数値で指定します。参考

.aspect-ratio {
  aspect-ratio: 16 / 9;
  aspect-ratio: 0.5;
}

Safari を含めた主要なブラウザでは実装済み(Safari は Safari15 から実装) なので、積極的に実戦投入できますね。

https://www.w3.org/TR/css-sizing-4/#ratios ※2022年6月時点で Working Draft なので、今後仕様が変更される可能性があります。

ハックやポリフィルで実装していた機能が標準化されていくのは、開発者としてとても嬉しいですね。 IE がサポート終了になることもあり、最新の標準機能を利用できるシーンは増えてくると思うので、しっかりキャッチアップしてクライアントワークでも実践していきたいと思います 💪