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

Question

我有这个图像网格。 我不希望两者之间有间隔。 宽度也应该是父级的100％。 每列大小相同，在这种情况下为20％。 flex负责这一点。 但是我想要高度与主要的长宽比，但这就是问题所在。 当我放大和缩小（或调整窗口大小）时，图像的高度保持恒定。 它的长宽比必须与图片的当前宽度相同。

有谁知道如何解决这一问题？

的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/