Floated thumbnail gallery, different sizes, how to handle?

Question

When simply doing float:left to all thumbnails of the same size, a gallery looks great. But when different size thumbnails come in to play, that is no longer the case.

What is the best way to handle different size thumbnails? Do I need to use tables instead?

example

score 13 · Answer 1 · answered Jul 20 '11 at 11:58

13

None of the possible CSS solutions look particularly good.

I recommend using JavaScript+jQuery instead, specifically one of these plugins:

answered Jul 20 '11 at 11:58

thirtydot

224,678
48
389
349

those plugins are truly amazing – Dónal Jan 13 '12 at 20:24

score 4 · Accepted Answer · edited Jul 21 '11 at 19:38

4

I think the best solution is to give each thumbnail a div container with a fixed size, so that every thumbnail takes the same space. I mean, don't resize your thumbnails. The picture in the div should be centered.

edited Jul 21 '11 at 19:38

Glen Selle

3,966
4
37
59

answered Jul 20 '11 at 11:40

dknaack

60,192
27
155
202

score 2 · Answer 3 · answered Oct 08 '13 at 11:39

2

I have used following plugin, it's working fine :

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

answered Oct 08 '13 at 11:39

Rohit Jindal

61
5

1

Note that [link-only answers](http://meta.stackoverflow.com/tags/link-only-answers/info) are discouraged, SO answers should be the end-point of a search for a solution (vs. yet another stopover of references, which tend to get stale over time). Please consider adding a stand-alone synopsis here, keeping the link as a reference. – kleopatra Oct 08 '13 at 11:40

score 0 · Answer 4 · answered Jul 18 '17 at 16:27

0

For those in 2017 looking for a gallery for different sized images, check this css-tricks article: https://css-tricks.com/seamless-responsive-photo-grid/

answered Jul 18 '17 at 16:27

Allan Oliveira

125
4

Floated thumbnail gallery, different sizes, how to handle?

4 Answers4