How do I dynamically create a collage (grid with no gaps) of images, where images have different heights?

css image grid css-float gaps-in-visuals
Homan picture Homan · Jun 30, 2011 · Viewed 22.7k times · Source

I want to display a page of thumbnails. The thumbnails are user uploaded artwork images. Each image has a constrained width, but not a constrained height, this is to show the full image without any cropping.

I want the images to butt up against each other with no gaps in between. The number of columns is not fixed: If I expand or resize the page the images should flow into correct number of columns. 

float:left

is ALMOST, what I want. Except when there are tall images in the page I get this gapped look:

enter image description here

How do I eliminate the gaps?

Answer

onefastsnail picture onefastsnail · Feb 25, 2012

Not sure how graceful you need your CSS, but a good option none the less. You could use masonry.js to help that.

http://css-tricks.com/seamless-responsive-photo-grid/

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