MRRI

レスポンシブ対応の画像やYouTube埋め込みなど、特定の縦横比を保ったボックスを作りたい場面って多いですよね。
でも、もうそんな面倒なことは不要です！CSSのaspect-ratioプロパティを使えば、超シンプルに比率をキープできます。

aspect-ratioは、要素の横幅に対する高さの比率を指定できるCSSプロパティです。
たとえば、16:9の横長ボックスを作りたい場合は、以下のように書くだけ。

.box {
　aspect-ratio: 16 / 9;
　width: 100%;
　background: #ccc;
}

このコードで、画面幅いっぱいに広がりつつ、縦横比が16:9のまま保たれるボックスができます。

画像の比率を固定しつつ、内容をトリミングしたいとき

img {
　aspect-ratio: 4 / 3;
　object-fit: cover;
　width: 100%;
}

aspect-ratioを使うと、レスポンシブ対応の要素を簡単・キレイに作れるようになります。
今まで複雑だったレイアウト調整が、1行で解決できとても便利です！