画像の隙間なく綺麗に並べたい。。。

Question

添付した画像のようなサイトで大きさの異なる画像を隙間なく綺麗に並べ方法を探したのですが見つかりません。。。

htmlとcssでは不可能なんですかね。。。

Comments

[Lhankor_Mhy]

そうですね。画像の端が切り取られることを許容しない限り、CSSでは難しいです。

[Daregada]

あなたが言う「隙間」とは、どの部分を指していますか?
A) 同じサイズの画像を並べたときに、境界にできる隙間
B) 違うサイズの画像を並べたときに、小さい方の画像にできる隙間

[K_3578]

新しく質問するなら前の質問を解決し終わってからにして欲しいですね。

Answer 1

全部縦（横）一列に並べれば隙間なくできるでしょうけど
おそらくそういうことを言いたいのではないとおもいます
拡大縮小や多少のはみ出しがOKなら不可能ではないですが
縦横を都合よくならべることは理論上不可能な場合が多いでしょう
もとの画像のサイズをを一定にしてください

Comments

[pandaman]

やはりそうですよね。。。
回答ありがとうございます！

Answer 2

幅が一定で高さが異なる画像（あるいはCSSで幅を揃える）なら段組みレイアウト、
高さが一定で幅が異なる（あるいはCSSで高さを揃える）ならFlexBoxで折り返しを指定するか、Gridで可能です。

[CSS]スクリプト無しで、高さがバラバラの画像を隙間無く配置するスタイルシートのテクニック | コリス

高さも幅も様々な画像となるとCSSだけでは無理です。
JSを使ってもかなり難しいかと。Masonryなどのライブラリーがありますが、サンプルを見る限りは幅か高さが一定のようです。