浮動縮略圖庫，大小不一，如何處理？

Question

當簡單地對所有相同大小的縮略圖執行浮動：向左時，畫廊看起來很棒。 但是當不同大小的縮略圖開始播放時，情況就不再如此了。

處理不同尺寸縮略圖的最佳方法是什么？ 我需要改用表格嗎？

Answer 1

沒有一個可能的 CSS 解決方案看起來特別好。

我建議改用 JavaScript+jQuery，特別是以下插件之一：

• http://masonry.desandro.com/
• http://isotope.metafizzy.co/

Answer 2

我認為最好的解決方案是給每個縮略圖一個固定大小的 div 容器，以便每個縮略圖占用相同的空間。 我的意思是，不要調整縮略圖的大小。 div 中的圖片應該居中。

Answer 3

我使用了以下插件，它工作正常：

http://suprb.com/apps/gridalicious/

Answer 4

對於那些在 2017 年尋找不同尺寸圖像的畫廊的人，請查看這篇 css-tricks 文章： https://css-tricks.com/seamless-responsive-photo-grid/