1ページにたくさんの画像を表示する必要があります。画像のサイズは異なり、幅が非常に広いものと非常に薄いものがあります。全部固定幅・固定高さの容器に入れたいです。
画像を配置するロジックは次のようになります。画像がコンテナよりも小さい場合は、アスペクト比が維持されるように最大サイズに拡大し、コンテナの中央に配置します。画像が大きい場合は、アスペクト比を維持したまま縮小してください。
いくつかの例：コンテナが150x150で、画像のサイズが100x50であるとします。この場合、画像は150x75まで拡大する必要があります。100x300のサイズの画像がある場合、画像は50x150に縮小する必要があります。
これはjavascriptで簡単に行うことができますが、可能であればそれを避けたいと思います。CSSだけでこれを達成する方法があるかどうか疑問に思います。Chrome、Firefox、Safariの最新バージョンで動作する限り、CSS3のみのソリューション、またはwebkit / firefox固有のディレクティブを使用できます（選択の余地がない場合は、IEのフォールバックを使用します）。
編集：もちろん、max-heightとmax-widthについて知っています。問題は、max-heightとmax-widthの両方を150に設定すると、必要に応じて画像が拡大されないことです。