Wie das Seitenverhältnis auf img in Flexbox in CSS beibehalten?

Question

Ich habe dieses Raster von Bildern. Ich möchte keinen Abstand dazwischen. Auch sollte die Breite 100% der Eltern sein. Jede Spalte hat dieselbe Größe, in diesem Fall 20%. Der Flex kümmert sich darum. Allerdings möchte ich das Verhältnis von Höhe zu Seitenverhältnis, aber das ist das Problem. Die Höhe der Bilder bleibt beim Ein- und Auszoomen (oder bei der Größenänderung des Fensters) konstant. Es muss dasselbe Seitenverhältnis wie die aktuelle Breite des Bildes haben.

Kann jemand das beheben?

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

Sie jedes Bild innerhalb div setzen soll.

Etwas wie folgt aus:

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

Und dann in CSS

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

Voll Beispiel hier: https://jsfiddle.net/cvru2yL5/