Packing different aspect-ratio images into uniform row height

[nilsw]

Hi, I’m interested to layout many images with different aspect ratios into rows of uniform height. Has anyone ever done this before with CSS or Javascript? The fancy term for this is called Strip Treemap algorithm. Is this a hard or easy problem to solve with CSS? Any tips or insight is greatly appreciated.

[Johann]

simple, but hey:

http://jsfiddle.net/V3Dks/

[nilsw]

Thanks Johann, this is a really great resource.

[thomas]

Here are some useful jQuery plugins for aligning elements of various dimensions, although they might be overkill for what you need:

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

[nilsw]

ok, Johan’s solution is a step in the right direction, but with text-align:left there is a bunch of dead space on the right and vice-versa. With text-align: center there is uneven spaces around the sides.

The isotope plugin that thomas proposed is really awesome, but not exactly what I’m looking for. I want there to be some way to dynamically resize the max row height on a per row basis in order to make sure images are packed evenly to both the left & right sides.

The super-techinical way of doing this is to measure all the images and re-order them, but this is a bit complicated (Strip Treemap algorithm). Plus, what if re-ordering the images is not an option as it is in my case?

[nilsw]

This is the goal for the layout:
https://plus.google.com/photos/107671704413122133444/albums/5646888504254171681

[Johann]

well they are using super-technical ways to do this for sure — whenever you resize the page, it serves completely different thumbnails of exactly the needed size. you can do it without going to such extremes, but you can’t do it without javascript I think..

[nilsw]

Talk to me about your Javascript ideas. Some kind of algorithm to measure all the images, add a certain number to a row, then re-scale each image so they will fill to the edges of a known width? This way each row of images has a different height, one which will allow the combined widths of images in that row (plus padding) to equal the known container width (say 1020px or something).

[Johann]

yeah. let’s say you have a desired row height like 150px..

– take first/next image, check how wide it would be when 150px high. add that to the row width.

– if that makes the row wider than the container width and the picture is the first (and so far only one) in the row, shrink as much as needed and go to next row. (that’s an extreme case that should rarely happen but hey, never say never)

– if it makes the row wider than the container width, but is not the only picture in the row, you now stretch all thumbs by the necessary factor. as you said, that would give rows varying heights. I guess rounding variations could make stuff imperfect here, so maybe it would be simples to allow for a bit of padding and use text-align: justify on top of all this.

uhm, good luck :)

[nilsw]

hmm, yes, I was just having the same idea. it works to use

when all the images are the same height, but for this it will need to be

since each row will need to be a different height… I think I’ve got the algorithm, now on to coding it! There are also a few special cases that might need to be accounted for.

[lorenzoh]

Hi! I’ve created a jQuery plugin that does this, check it: http://jquery-mosaic.tin.cat

[Redfredg]

I have proposed a dynamic programming algorithm for packing images in a grid of completely filled rows of uniform widths. By allowing each row to be of a different hight and finding the optimal placements of line-breaks the desired packing is achieved. By performing a scaling post-process each line is guaranteed to be exactly as wide as the desired width.

[Author]

Posts