アスペクト比固定レスポンシブギャラリー

解説

画像の縦横比をそろえて崩れないレスポンシブギャラリーです。各セルに CSS の aspect-ratio を指定し、画像は object-fit:cover で枠いっぱいに切り抜いて表示します。元画像の比率がばらばらでも、はみ出さずに整然と並びます。全体は grid-template-columns:repeat(4,1fr) の 4 カラムで、ワイド画像だけ grid-column:span 2 と aspect-ratio:2/1 で横長 2 マス分を占有し、リズムのある配置になります。JavaScript は不要です。

使いどころ

• 制作実績やポートフォリオのサムネイル一覧
• 商品写真をきれいに整列させたい EC のギャラリー
• 記事のアイキャッチを並べるメディアサイト

ホバーで画像が scale(1.05) にわずかに拡大し、overflow:hidden の枠内で動くため周囲に影響しません。カラム数は repeat(4,1fr) の数字を変えれば調整でき、画面幅 480px 以下では 2 カラムに自動で切り替わります。読み込み速度のため、本番では各画像に幅・高さや loading="lazy"、意味のある alt を付けるとよりよくなります。