サイズがバラバラの画像をそのまま並べてしまうと隙間が出てしまうので、とりあえず同じサイズのサムネイル状にして並べてみたいと思った時に簡単に並べることができる方法になります。

まずはHTMLで画像をこの様に<ul>の中に入れてしまいます。あとはこの<ul>と<li>をcssでコントロールしていきましょう。

<ul class="box">
  <li><img src="./img/01.png" alt="test"></li>
  <li><img src="./img/02.png" alt="test"></li>
  <li><img src="./img/03.png" alt="test"></li>
</ul>

まずはgridを使ってサクッと画像を並べてみます。

.box {
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:1rem;
}

gridで並べるだけだと縦のサイズが更に広がってしまいます。

仕方がないので縦の幅を固定にしてみましょう。

.box {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.box img {
  object-fit: cover;
  aspect-ratio: 4/3;
}

これで、サムネイル状に並びました。ここでの肝はaspect-ratioとobject-fitになります。

aspect-ratioは文字通りアスペクト比を設定するCSSになります。これがない時代は画像を囲んでいた<li>をごにょごにょと調整する必要があったのですが、これのおかげで画像に直接サイズ比を固定してもらえるようになりました。

object-fitも画像の表示方法を指定するCSSになります。object-fit: coverは決められたサイズ内に画像を隙間なく配置する様に指定します。

これを使用することにより先程のaspect-ratio内の画像サイズいっぱいに画像が広がってサムネイル状になりました。簡単ですね。

画像見切れすぎるのが気になるので隙間が出てもいいから画像を全部見せたいという場合は、

.box img {
  object-fit: contain;
  aspect-ratio: 4/3;
}

この様にobject-fit: contain;を使うことにより、指定された枠の中で画像が全部表示されるように調整するようになります。

顔写真を並べる場合顔が見えるように上揃えにしたいという場合もあります。その場合はこの様にCSSをちょっとだけ追加します。

.box img {
  object-fit: cover;
  object-position: center top;
  aspect-ratio: 4/3;
}

object-positionは画像の表示位置を変更するCSSになります。横幅中央で縦幅上に設定したため、画像の上の方が表示されるようになりました。これならなんとなくわかりますね。

ちなみに、object-fit: contain;でも使用できます。その場合は画像の指定方向に画像が寄ります。比較的使い道が多いので覚えておくと便利ですね。

アイキャッチ画像などを並べることが多い昨今、HTMLやCSSの書き方も少しづつ変わってきているので、覚え直してみるのも良いかもしれませんね。