【新旧比較】CSSで画像のアスペクト比を固定する最強の手法。padding-topハックからモダンなaspect-ratioへ

Tips：CSS Gridでの「列指定」の書き方

grid-template-columns: 1fr 1fr 1fr; /* 3列に等分 */

grid-template-columns: repeat(3, 1fr); /* これも3列に等分 */

どちらも同じ結果になりますが、列数が増える場合（例えば12列など）は repeat を使うのが実務でのマナーです。状況に応じて使い分けましょう！

1. 【旧】王道のpadding-topハック

See the Pen アスペクト比「旧」 by 広瀬和哉 (@lpvcfdes-the-styleful) on CodePen.

実装コードと解説（旧）

/* 親要素：比率を確保する箱 */
.items .img {
    position: relative;
    width: 100%;
    padding-top: 75%; /* 4:3の場合 (3 ÷ 4 × 100) */
    overflow: hidden;
}

/* 子要素：箱の中にいっぱいに広げる */
.items .img img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
}

• paddingの性質を利用：CSSのpadding（％）は「親要素の横幅」を基準にする性質を突いたテクニックです。
• 絶対配置が必要：paddingで中身が押し出されるため、画像はabsoluteで浮かせる必要があります。
• 安定性：IE11を含む、ほぼすべての古いブラウザで動作するのが最大のメリットです。

2. 【新】モダンなaspect-ratioプロパティ

See the Pen アスペクト比「新」 by 広瀬和哉 (@lpvcfdes-the-styleful) on CodePen.

実装コードと解説（新）

/* 親要素：1行で比率を指定 */
.items .img {
    width: 100%;
    aspect-ratio: 4 / 3; /* 幅 / 高さ */
    overflow: hidden;
}

/* 子要素：シンプルに100%指定 */
.items .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

• 直感的な記述：「4 / 3」と書くだけで比率が決まるため、誰が見ても分かりやすいコードになります。
• 保守性が高い：絶対配置（absolute）を使わないため、HTML構造を変えずにレイアウト調整が可能です。
• 2026年の標準：モダンブラウザが完全に普及した現在、新規開発でこれを使わない理由はありません。

徹底比較：どちらを使うべき？

まとめ：歴史を知って最新を使いこなす