CSS Grid: Fit all images to cover the same height

Question

I'm setting up a gallery with both landscape- and portrait-oriented images, and I can't get them to fit an image grid of all equal heights (i.e., crop-view for the portrait images so they don't stretch their row-height and cause severe stretching for other images in the same row). My current code looks as follows:

HTML:

<div class="grid-three">
 <a href="#img1"><img src="landscape1.jpg" class="thumbnail"></a>
 <a href="#img2"><img src="landscape2.jpg" class="thumbnail"></a>
 <a href="#img3"><img src="portrait.jpg" class="thumbnail"></a>
 <a href="#img4"><img src="landscape3.jpg" class="thumbnail"></a>
 ...
</div>

CSS:

.thumbnail {
  max-width: 100%;
  height: 100%;
  overflow: hidden;
}
.grid-three {
  display: grid;
  grid-template-columns: repeat(3,33%);
  /*grid-auto-rows: min-content;*/
  grid-gap: 2px;
}

I've tried, as above, grid-auto-rows and grid-template-rows and different commans in the grid-template-columns, but nothing seems to work. I've also tried different height and width commands in the .thumbnails tag, but likewise no luck. I have a workaround of cropping a "thumbnail" preview landscape image for any portrait image, but that seems inefficient (not to mention adding more files for the page to load). Is there a way I can fix this in CSS that doesn't involve setting a pixel height for the rows (I want it to resize well on different screens)?

Alex Tudor Alex Tudor · Accepted Answer · 2019-12-22T17:45:46

I looked over your code and I have to tell you that width / height (max or not) does not depend (at least in this case) by the container of the image, but by the image itself (so, if the container has width=300px and the present image has width=900px, the image will appear as "cut").

My advice would be to choose fixed dimensions for the thumbnails or try to see if position:relative changes something. You can do a small calculus by subtracting your device's inner width (e. g. 1536px on a normal laptop) by 4 (2 * gap) and then dividing the result by 3.

Again, this could possibly be achieved by some small position-related CSS code.

Hope it helped!

Happy coding :)

CSS Grid: Fit all images to cover the same height

2 Answers