How can I create a grid of images without any spacing in between them? I want the width to be 100% of the parent element and each column to have the same size, for example, 20%. Using flex takes care of the columns, but I'm struggling with making the height maintain the aspect ratio. Even as I zoom in or out, the height of the images remains constant, which is not ideal. Is there a way to make the height adjust according to the current width of the image?
If you know how to solve this issue, please share your insights!
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%;
}