アスペクト比固定ギャラリー
アスペクト比固定ギャラリーは、並べたタイルがすべて同じ16対9の比率を保つグリッドです。各セルに aspect-ratio:16/9 を指定しているため、列幅が変わってもセルの縦横比は崩れず、画像のサイズがばらついても枠の高さが揃います。
解説
アスペクト比固定ギャラリーは、並べたタイルがすべて同じ16対9の比率を保つグリッドです。各セルに aspect-ratio:16/9 を指定しているため、列幅が変わってもセルの縦横比は崩れず、画像のサイズがばらついても枠の高さが揃います。display:grid の2列構成と gap で均等な間隔を取り、追加スクリプトなしで端正な見た目が得られます。
使う場面
- サムネイルや写真を比率を揃えて見せる画像ギャラリー
- 動画の一覧やカードのプレビュー枠
- 商品画像をきれいに整列させたいECの一覧
比率は aspect-ratio の値で決まり、正方形にしたいなら 1/1、縦長なら 3/4 のように書き換えます。列数は grid-template-columns の repeat(2,1fr) を変えれば増減できます。実際に画像を入れる際は img に object-fit:cover と width:100%; height:100% を与えると、枠いっぱいに切り抜いて収まります。width と height 属性や loading:lazy も付けると表示が安定します。
使用例・適したシーン
- 商品一覧表示
- ブログ記事カード一覧
- メンバー一覧
よくある質問
16対9以外の比率にできますか
できます。各セルの aspect-ratio の値を 1/1 で正方形、3/4 で縦長などに書き換えるだけで、全タイルの比率が揃って切り替わります。
実際の画像はどう入れますか
セル内にimgを置き、object-fit を cover にして幅と高さを100%にすると、比率を保ったまま枠いっぱいに切り抜いて表示できます。