CSS ONLYを使用して画像をグリッドに配置し、高さを制限し、アスペクト比を維持

Question

私は1行に表示する画像のグリッドを持っています。グリッドの高さは、ブラウザの高さを超えてはいけません。それぞれの画像は私の任意の高さと任意の幅を持つことができます。

イメージは、そのコンテナ内で縦と横の中央に配置する必要があります。イメージの高さまたは幅がコンテナより大きい場合、イメージはその境界をオーバーフローしません。

これは可能ですか？

似たような質問をする投稿がたくさんあります。

Constrain img to div and maintain aspect ratio?

CSS: How can I set image size relative to parent height?

のように。しかし、私が見ているものはどれもflexboxを使用していません。ここで

<div class='grid-container'> 
    <div class='grid'> 
    <div class='col'> 
     <div class='img-container'> 
     <img src='http://via.placeholder.com/300x150'/> 
     </div> 
    </div> 
    <div class='col'> 
     <div class='img-container'> 
     <img src='http://via.placeholder.com/200x400'/> 
     </div> 
    </div> 
    </div> 
</div> 

https://codepen.io/stljeff1/pen/MEWoPN

私は

なぜimg {max-height: 100%; }は何もしませんが、img { height: 150px; }は画像を制約んが何をしようとしている示すcodepenされますか？以下のコメントで指摘したように

**********編集**************** 、私はオブジェクトフィットを使用することができます。例では、IEエッジで動作し、いないIE 11.あなたがこれを行うにしようとした場合、私は知らない

Answer 1

を引用：

img { 
     width: 100%; 
     max-height: 100%; 
     display: block; 
    } 

https://codepen.io/headmax/pen/wrvqRv