I'm looking for a way to display a gallery of images of various widths and heights so that there are not any spaces between them.
Something like this solution, but compatible with IE and would prefer horizontal rows rather than vertical columns: http://css-tricks.com/seamless-responsive-photo-grid/
Failing a plugin or similar, does anyone have any info on how to acheive this? I've had a bash at it with a bit of PHP and figured out how to proportionally scale the images to a given max row height and keep track of how much space is left, however this doesn't help when you get images shorter than the max (you still get a bit of whitespace).
One idea was to just display the images, then use jQuery to scale them (using the width / height attributes) as that way I'd be able to take y images and work out how to fit them into a row x pixels wide.
Not short on elbow-grease, just need a nudge in the right direction. Any help appreciated
I have been trying to get what you want for a while now. I looked are Chris Coyier's seamless photo grid as well, and came upon some problems when I introduced filtering.
You can see my questions/answers on stackoverflow regarding css-column seamless photo grids here and here.
Then, I tried a javascript approach by using jQuery Masnory in a fluid evnvironment. You can read up on how to do that in this stackoverflow post.
It works, but I am still trying to figure out why there are vertical gaps inbetween the images.
So my answer is to use Masonry if you want a javascript approach, but also be aware that I've never seen a seamless and responsive photo implementation of it. I'm still looking.