javascript - 親の幅/高さに合わせて画像のグループをスケーリングします

Question

親コンテナー内にある、さまざまなサイズの画像を含む div があります。

<div id="parentContainer">
<div id="boxToScale">
    <img src="http://placehold.it/350x150" />
    <img src="http://placehold.it/150x350" />
    <img src="http://placehold.it/200x200" />
    <img src="http://placehold.it/50x200" />
</div>
</div>

内部(幅と高さの両方)#boxToScaleに収まるようにスケーリングする必要がありますが、その内部のすべての画像は縦横比を維持します。#parentContainerすべての画像を同じ倍率で拡大縮小し、同じ線上に維持する必要があります。

設定を示す jsfiddle は次のとおりです: http://jsfiddle.net/32sm4/

単一の画像を比例的にスケーリングするためのものはたくさんありますが、画像のグループを比例的にスケーリングするためのものではありません。画像のサイズがどうなるかは事前にわかりません#parentContainer。

CSS だけで実行できない場合は、Javascript/jquery ソリューションで問題ありません。ありがとう！

#boxToScale編集：これは（大まかに）スケーリングされ た後に私が望むものです：