CSS aspect-ratio 実践ガイド ― 脱・paddingハックで縦横比を操る

あの「paddingハック」はもう不要です

カード型のコンポーネントを作るとき、サムネイル画像を「16:9」や「1:1」の比率で固定したい場面は頻繁にあります。かつて、横幅の可変に合わせて高さを維持するには、非常に面倒なテクニックが必要でした。

.image-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9のための謎の計算 (9÷16) */
}
.image-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

親要素に高さを直接指定せず、paddingの%指定（親の幅に対する比率になる性質）と、子要素の絶対配置を組み合わせた力技です。現場ではおなじみのコードでしたが、コードが長くなるうえに直感的ではありませんでした。

今は aspect-ratio というプロパティを使えば、これらがたった1行で解決します。

基本：最小限のコードで縦横比を指定する

使い方はとても直感的です。幅 / 高さ の形式で比率を書くだけです。

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

実践：画像とobject-fitを組み合わせる

実務で最も活躍するのは、CMSからアップロードされる「サイズがバラバラな画像」を、綺麗なカードレイアウトに収めるときです。

要素の枠を aspect-ratio で固定できても、中の画像（imgタグ）が歪んでしまっては意味がありません。必ず object-fit: cover; とセットで使いましょう。

.card-thumbnail {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover; /* 画像の歪みを防ぎ、枠をトリミングで埋める */
  border-radius: 8px;
}