如何在CSS中的Flexbox中的img上保持长宽比？

Question

I have this grid of images. I want no spacing in between. Also the width should be 100% of parent. Each column same size, in this case 20%. The flex takes care of that. However I want the height to main aspect ratio, but that is where the problem is. The height of the images stays constant as I zoom in and out (or resize window). It needs to be same aspect ratio as the current width of the image.

Does anyone know how to fix this?

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

You should set each image inside div.

Something like this:

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

And then in CSS

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

Full example here: https://jsfiddle.net/cvru2yL5/