CSSでflexboxのimgでアスペクト比を維持する方法は？

Question

私はこの画像のグリッドを持っています。私はその間に間隔を置いてはいけません。また、幅は親の100％にする必要があります。各列は同じサイズ、この場合は20％です。フレックスはそれを処理します。しかし、私は高さを主なアスペクト比にしたいが、それは問題がどこにあるかである。ズームイン/ズームアウト（またはウィンドウのサイズ変更）すると、画像の高さが一定に保たれます。画像の現在の幅と同じアスペクト比である必要があります。

誰でもこれを解決する方法を知っていますか？

HTML

<div class="image-grid-container"> 
    <div class="image-grid"> 
    <img src="images/me/img01.png" /> 
    <img src="images/me/img02.png" /> 
    <img src="images/me/img03.png" /> 
    <img src="images/me/img04.png" /> 
    <img src="images/me/img05.png" /> 
    </div> 
    <div class="image-grid"> 
    <img src="images/me/img06.png" /> 
    <img src="images/me/img07.png" /> 
    <img src="images/me/img08.png" /> 
    <img src="images/me/img09.png" /> 
    <img src="images/me/img10.png" /> 
    </div> 
    <div class="image-grid"> 
    <img src="images/me/img11.png" /> 
    <img src="images/me/img12.png" /> 
    <img src="images/me/img13.png" /> 
    <img src="images/me/img14.png" /> 
    <img src="images/me/img15.png" /> 
    </div> 
</div> 

CSS

.image-grid-container .image-grid { 
    display:flex; 
} 
.image-grid-container .image-grid img { 
    width:100%; 
} 

Answer 1

あなたはdivの内側に、それぞれの画像を設定する必要があります。このような

何か：ここ

<div class="img"> 
    <img src="http://placehold.it/200x200" /> 
</div> 

そしてCSSで

.image-grid-container .image-grid .img img { 
    width: 100%; 
} 

全例：https://jsfiddle.net/cvru2yL5/