CSS (?) - row of images dynamically resized to fill container - css

Question

I've stumbled upon an interesting problem while playing with my website.
So I've got a containing column with a fixed width. In this I have a number (two for now, don't know whether it'll matter) of images in one row. The images' size and aspect ratio are undetermined and not equal to each other. Now, I'm looking to resize them, so that their height is equal, and their combined width is equal to that of the parent container, while keeping their aspect ratio. And also resize the container height accordingly, for that matter.
Hope I made myself clear.
I'm sure it's possible with JavaScript or similar, but I'm mainly interested in if there's a solution using CSS.
Thanks

Answer 1

I think that's impossible, and even if it were possible, it would be the darkest css hack i've ever seen (besides it would imply using not-very-compatible CSS). It's way easier and recommendable doing that with Javascript. (EDIT: for a jQuery solution see this: http://jsfiddle.net/martinschaer/aJtdb/)
But, for fun I did this: http://jsfiddle.net/martinschaer/cGZrF/
It's the closest you can do with CSS3 for what you need. There's a small gap that fills empty vertical space, but all the images are resized with CSS to fit in the container.
.container{
width: 600px;
margin: 10px;
background-color: #000;
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
.imgwrapper {
box-flex: 1;
}
img{
max-width: 100%;
height: auto;
display:block;
}
See the jsfiddle (http://jsfiddle.net/martinschaer/cGZrF/) for the full code compatible with mozila and webkit.
EDIT: for a jQuery solution see this: http://jsfiddle.net/martinschaer/aJtdb/

Answer 2

I'm not too experienced with JavaScript yet, but I have one addition to make for any late comers (like myself)…
I noticed that using the provided JSFiddle in Martin's answer on multiple rows compresses the images so I'd like to add that this:
var rows = 0; // set row count for multiple 'imageWrapper' divs
$('.imageWrapper').each(function(){
rows +=1;
});
and then use rows like this:
$('.imageWrapper img').each(function(){
this.width = $(this).data('width') * (container_width / container_width_temp) * rows - 8;
});
the - 8 is because I found that the last image in the row tends to overflow the container and get pushed into a row by itself.
I'm still looking for the perfect answer to this question myself, but this got me a little closer.