Align a number of images in a container - html

Question

I have a unknown number of images (max. three) that I am programmatically adding to a html output.
I would like to put the images in a container so that they are automatically resized in a way that the container itself does not exceed a fixed width.
I tried various solutions such as a modified version of the answer mentioned here (Center image in container element with fixed size (CSS, HTML)), but my solution below keeps flowing over the boundaries container if the images widths exceed its fixed width.
### HTML ###
<div id="container">
<div class="image-container">
<img src="#" alt="Image One" />
<img src="#" alt="Image Two" />
<img src="#" alt="Image Three" />
</div>
</div>​
### CSS ###
#container {
width: 400px;
height: 100px;
display: table;
background-color: #ccc;
}
#container .image-container {
text-align: center;
vertical-align: middle;
display: table-cell;
}
#container .image-container img {
max-width: 100px;
max-height: 60px;
}
Edit:
I'm not a javascript wizz, but the following did the trick for me. The fixed image width and height seen in the example are set by the program that is putting this HTML output together.
<script type="text/javascript">
<!--
function resize_image( img ) {
var newSize = scaleSize(120,100,img.width,img.height);
// alert(newSize);
img.width=newSize[0]; img.height=newSize[1];
}
function scaleSize(maxW, maxH, currW, currH) {
var ratioW=currW/maxW;
var ratioH=currH/maxH;
var ratio=1;
if (ratioW>ratioH) ratio=ratioW; else ratio=ratioH;
if (ratio>1) {
currH=currH/ratio;
currW=currW/ratio;
}
return [currW,currH];
}
-->
</script>
Images are then loaded with
<div class="s1">
<img id="img0" src="1.png" class="img_class" onload="resize_image(document.getElementById('img0')); return true;"/>
<img id="img1" src="2.png" class="img_class" onload="resize_image(document.getElementById('img1')); return true;"/>
</div>
<style type="text/css">
.s1 { width:320px; height:100px; text-align: center; vertical-align: middle; }
.img_class { display: inline-block; vertical-align:middle; }
</style>