クライアント様からいただいた、サイトに載せる様の画像のサイズがちょっとバラバラだったので、画像をきれいに並べられないものかと調べてみました。
なるべくお手軽に実装できないかと調べてみたところ、CSSだけでの配置を紹介してくれているサイトがあったので、それに倣って設定してみました。
【サンプル】
【HTML】
<ul class="sample"> <li><img src="sample.jpg" alt="" /></li> <li><img src="sample.jpg" alt="" /></li> <li><img src="sample.jpg" alt="" /></li> <li><img src="sample.jpg" alt="" /></li> <li><img src="sample.jpg" alt="" /></li> <li><img src="sample.jpg" alt="" /></li> <li><img src="sample.jpg" alt="" /></li> <li><img src="sample.jpg" alt="" /></li> <li><img src="sample.jpg" alt="" /></li> </ul>
【CSS】
ul.sample{
/* Prevent vertical gaps */
line-height: 0;
-webkit-column-count: 3;
-webkit-column-gap: 0px;
-moz-column-count: 3;
-moz-column-gap: 0px;
column-count: 3;
column-gap: 0px;
}
ul.sample li{
margin:0;
/* Just in case there are inline attributes */
width: 100% !important;
height: auto !important;
}
ul.sample li img{
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-b;
border:solid #fff 1px;
}
画像の「border」と「box-sizing」は、単に枠線が欲しかったから入れただけなので、配置だけなら不要です。
実際に使用した画像はこんなにバラバラじゃなくて、もうちょっと差は少ないので、もう少しきれいにまとまると思います。
※画像は縦並びに配置されるようなので、並び順に意味がある場合は要注意です。
参考にさせて頂いたサイトでは、@mediaを使用して、ビューポートのサイズに合わせて「column-count」を調整して、カラム数を調整したりもしています。
※このサンプルは、PCでは3カラム、スマホ（750px以下）では2カラムにしてあります。