Floated thumbnail gallery, different sizes, how to handle?

css image gallery css-float thumbnails
Wesley picture Wesley · Jul 20, 2011 · Viewed 12.8k times · Source

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

Answer

thirtydot picture thirtydot · Jul 20, 2011

None of the possible CSS solutions look particularly good.

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

Related questions

How do I auto-resize an image to fit a 'div' container?

How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining its width:height ratio? Example: stackoverflow.com - when an image is inserted onto the editor panel and the image …

Read More
How to vertically align an image inside a div

How can you align an image inside of a containing div? Example In my example, I need to vertically center the <img> in the <div> with class ="frame": <div class="frame" style="height: 25px;"> &…

Read More
CSS force image resize and keep aspect ratio

I am working with images, and I ran across a problem with aspect ratios. <img src="big_image.jpg" width="900" height="600" alt="" /> As you can see, height and width are already specified. I added CSS rule for images: …

Read More