如何在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/