html - コンテナ内の多数の画像を整列する

Question

プログラムで HTML 出力に追加する不明な数の画像 (最大 3 つ) があります。コンテナ自体が固定幅を超えないように自動的にサイズ変更されるように、画像をコンテナに入れたいと思います。ここに記載されている回答の修正版など、さまざまな解決策を試しました（固定サイズのコンテナ要素の中央の画像（CSS、HTML））。

### 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;        
}

編集： 私はjavascriptの専門家ではありませんが、次のようにしてうまくいきました。例に示されている固定の画像の幅と高さは、この HTML 出力をまとめるプログラムによって設定されます。

      <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>

次に、画像が読み込まれます

<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>