画像を敷き詰める
画像リストなどを作るとき、表示数を稼ぎたいので画面いっぱいに画像を敷き詰めたくなるときがあります。しかし通常であれば、画面の横幅と画像の横幅の比が合っていることなどは少なく、たいてい完全に敷き詰めることはできないです。
そこで今回は画像の横幅を状況に応じて計算し、画面(もしくは親要素)の横幅に追従して隙間なく画像を敷き詰められるようにしたいです。レスポンシブにも対応します。
要件の定義
実装のイメージ
今回やろうとしている事のイメージは以下の形です。同じサイズの画像を隙間なく敷き詰めることを目的とします。 またレスポンシブ対応の為、画面サイズに関わらず画像をぴったりと敷き詰められるようなロジックを投入したいです。
この手の画像リストはCMSを介して実現することがほとんどだと思います。今回の場合はwordpressで実装していますが、特にwordpressじゃなければできないわけではないので、他のCMSでも参考になるのではないかと思います。
ロジックのイメージ
ロジックとしては以下の様な感じ。横幅に対してぴったりになる画像サイズに仕立てるようにします。 ただなるべく元画像のサイズからかけ離れないように最小限の拡大で済むようにしたいです。
画像敷き詰めの実装
コード
コードは非常に単純です。
$( window ).on("load resize",function(){
var containerWidth = $( "#container" ).outerWidth();
var imgWidth = 150;
var divideContainer = Math.floor( containerWidth / imgWidth );
var divideRemainder = containerWidth % imgWidth;
var newImgSize = imgWidth + ( divideRemainder / divideContainer );
$( ".imgSpread" ).css( "width" , newImgSize );
$( "#containerWidth" ).text( "#containerの横幅" + containerWidth + "px" );
$( "#imgWidth" ).text( "画像の横幅" + newImgSize + "px" );
});変数や計算のイメージは以下の通り。
デモページも用意しました。jsのコードやcssはインラインで記述していますので、お使いのブラウザのF12を押してデベロッパーツールで確認してもらえると幸いです。
デモページはぜひウインドウのサイズをいろいろ変えてみてほしいです。動的に画像サイズが変化して敷き詰められるはずです。
補足説明
画像について
今回はwordpressのサムネイルのデフォルトサイズである150×150の画像を対象にしてみましました。正方形でなくてはいけないことはないので、他のサイズでも実現出来ます。
画像サイズを直接 var imgWidth = 150; のように指定していますが、本来は画像サイズを取得するロジックをかませた方がいいと思います。
css単体では難しい
実装してみると何の変哲もない機能ですが、cssのみでやろうとすると難しいです。たとえば画像のwidthを%指定にすると確かに横幅に追従しますが、分割数は変わらないので、画像が意図しない大きさに拡大されてしまう恐れがあります。
今回の方法であれば、ほぼ10%程度の拡大で敷き詰めをサイズに対して動的に実現することができます。 許容範囲ではないだろうか。
もちろん画像のサイズが大幅に変わっても構わない場合はその限りではないです。
画像の下辺の隙間
画像敷き詰め時に注意したいのが、cssのvertical-alignです。この値によって、画像下辺に隙間が出来る場合があります。これはどの基準で行に対して要素をそろえるかの設定ですが、画像はインライン要素なのでvertical-alignの影響を受けます。
ブラウザやcssリセットの仕方で異なるかもしれないですが、vertical-alignのデフォルトはbaselineかと思います。もし隙間が発生するとときはbottomに設定してあげれば、隙間を解消できます。
まとめ
今回は画像のサイズがそろっている場合だったが、今度は横幅もしくは縦幅が異なる画像をぴっちり敷き詰める方法を説明したいと思います。最近ではPinterestのような画像敷き詰めデザインも流行っていますので、サイズが違う画像の例の方が参考になるかもしれないです。
今回の記事は基本編として読んでいただければ幸いです。
@MINOは今住んでいる４畳間に札束を敷き詰めたいです。
