とろろこんぶろぐ

かけだしR&Dフロントエンジニアの小言

画像をタイル上に並べる方法

概要

サイズの異なる画像をタイル上に並べる際に、 column-gapcolumn-count が使えるということを知ったのでメモ。

タイル上と言っているのはこんな感じ↓の画像の配置のこと。

f:id:ka2jun8:20200314164603p:plain:w300

本記事の内容は下記のページの焼き直し。

css-tricks.com

HTML + JS

下記は 100px から 400px までのランダムな大きさの画像を 25枚並べているだけ。

<div id="photos" class="photo"></div>
function getRandomSize(min, max) {
  return Math.round(Math.random() * (max - min) + min);
}

for (var i = 0; i < 25; i++) {
  var width = getRandomSize(100, 400);
  var height =  getRandomSize(100, 400);
  $('#photos').append('<div class="item"><img src="//placehold.jp/'+width+'x'+height+'.png" alt="sample image"></div>');
}

CSS(SCSS)

適用する css (簡単のため scss )は以下。

.photos {
  column-gap: 0;
  column-count: 4;
  line-height: 0;
  width: 100%;

  .item {
    padding: 1px;

    img {
      width: 100%;
      height: auto;
    }
  }
}

column-gapcolumn-count を使う。 column-gap でカラムとカラムの間を 0px とし、 column-count で列数(今回では4)を指定する。

基本的にはこれだけでタイル上に画像が並ぶ。 あとは、細かいスタイル修正を行えばok

例えば、 line-hight を 0 として縦間隔を狭めたり、padding をとって間をあけたりなど。 画像に対しては縦横比を揃えたまま表示するようにしておく。

参考:

column-gap (grid-column-gap) - CSS: カスケーディングスタイルシート | MDN

column-count - CSS: カスケーディングスタイルシート | MDN

サンプルコード