画像を2枚横に並べる方法

方法1: 通常のグリッド表示

画像の高さが異なっても、それぞれの高さを保ちながら横に並べます。

画像1 画像2

方法2: 同じ高さで表示

画像を300pxの高さで統一して表示します。

画像3 画像4

使い方

  1. 通常のグリッド: <div class="image-grid">で画像を囲む

    • 画像の元の高さを保持
    • モバイルでは縦に並ぶ
  2. 高さを揃える: <div class="image-grid-equal">で画像を囲む

    • 高さ300pxで統一
    • 画像は自動的にトリミング(object-fit: cover)
    • モバイルでは縦に並ぶ

3枚以上並べたい場合

CSSをカスタマイズして、3列や4列のグリッドも作成できます。