Keep Image Ascpect Ratio - image

Question

I'm currently refactoring my website and try to get rid of a few breakpoints.
In my portfolio, I have an image gallery, which displays 3x3 image tiles. Those tiles are built with css grid. The tiles in my example should be 200px high and minmax (200px, 333px) width.
Currently, the tiles work as expected. But the images don't keep their aspect ratio. Is there any way to keep the original ratio and cut the images in their height? The smallest version of the container should be 200x200.
https://codepen.io/yanniksturm/pen/LYVegro
<div class="content">
<div id="img1" class="imageWrapper">
<img src="https://images.unsplash.com/photo-1562886889-4ff7af0602ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2089&q=80">
</div>
<div id="img2" class="imageWrapper">
<img src="https://images.unsplash.com/photo-1562886889-4ff7af0602ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2089&q=80">
</div>
<div id="img3" class="imageWrapper">
<img src="https://images.unsplash.com/photo-1562886889-4ff7af0602ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2089&q=80">
</div>
</div>
.content {
min-width: 600px;
max-width: 999px;
margin: auto;
width: 80%;
backgeound-color: red;
display: grid;
grid-template-columns: minmax (200px, 333px) minmax (200px, 333px) minmax (200px, 333px);
grid-template-rows: 200px;
}
.imageWrapper {
height: 100%;
width: 100%;
}
img {
height: 100%;
width: 100%;
}
#img1 {
grid-column: 1;
}
#img2 {
grid-column: 2;
}
#img3 {
grid-column: 3;
}
Thanks a lot for your help!

Answer 1

You need to set your img width and height to auto and add a max-width: 100%; to it in order to keep the aspect ratio.
img {
height: auto;
width: auto;
max-width: 100%;
}
See below snippet.
You could use object-fit: cover; but that is not supported in older browsers (I am looking at IE11).
.content {
min-width: 600px;
max-width: 999px;
margin: auto;
width: 80%;
backgeound-color: red;
display: grid;
grid-template-columns: minmax (200px, 333px) minmax (200px, 333px) minmax (200px, 333px);
grid-template-rows: 200px;
}
.imageWrapper {
height: 100%;
width: 100%;
border: 1px solid red;
}
img {
height: auto;
width: auto;
max-width: 100%;
}
#img1 {
grid-column: 1;
}
#img2 {
grid-column: 2;
}
#img3 {
grid-column: 3;
}
<div class="content">
<div id="img1" class="imageWrapper">
<img src="https://images.unsplash.com/photo-1562886889-4ff7af0602ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2089&q=80">
</div>
<div id="img2" class="imageWrapper">
<img src="https://images.unsplash.com/photo-1562886889-4ff7af0602ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2089&q=80">
</div>
<div id="img3" class="imageWrapper">
<img src="https://images.unsplash.com/photo-1562886889-4ff7af0602ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2089&q=80">
</div>
</div>