showing square images in a grid in a responsive layout - css

Question

I have a bunch of images that I want to display neatly in a grid.
Actually the images are near square (but some of them are off by some pix in height)
It would obviously be easy to just set them a fixed width and height via css,
but I want to scale them with the width of the container.
I arrange them in a table (or within inline divs -- does not matter for the problem)
img.width:100% does not help here. Since it also scales the height,
so we end up with some different heights for all the images.
setting img.height:100% does not help either, as they are not square any more.
I finally ended up in adjusting this via coffescript.
But my question is, if there really is no way to accomplish this with pure css.
My solution is to attach .square_all as a marker to the container,
and then retrieving the width of the first image of the container,
and setting that as height of all images in the container.
Not field tested, works for me
square_all.coffee:
#
# make all images in a group the same height as the first's width
#
$ ->
square_all = ->
size = $('.square_all').each (index, element) ->
imgs = $(element).find('img')
size = imgs.first().width()
imgs.height size
true
square_all()
$(window).bind 'resize', (event) -> square_all()
Sidenote:
It might be tempting to also set the width of the imgs to size,
but this does not work. Because your images will than have a fixed width,
instead of being width:100%, so they will no longer adjust to the width of the container.
In my environment we scale the images down by width,
so that they are all the same width, but we scale the height proportionally.
I don't care about the heights in this solution, I just scale the height.
In other contexts, cropping the height might be more apropriate.

Answer 1

I would do it in pure css with percentages and a div type row
DEMO http://jsfiddle.net/kevinPHPkevin/R8Rrf/
.row {
width:100%;
}
img {
width:18%;
max-width:100px;
}