CODEWITHSUNDEEP
htmlcssimagecss-grid
sebastianross
sebastianross

Reputation: 43

CSS Grid: Fit all images to cover the same height

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)?

Upvotes: 0

Views: 4127

Answers (3)

O&#39;talb
O&#39;talb

Reputation: 131

set the images container to a fixed height then set its children to 100%

.grid-three { height:120px;}
.grid-three > img {height:100%}

Upvotes: 0

Rachel Gallen
Rachel Gallen

Reputation: 28563

grid-template-columns has an auto-fit property; perhaps you could use that?

Syntax would be grid-template-columns: repeat( auto-fit, 33%);

There are more examples on the mozilla docs

An alternative would be to use the object-fit property for the images; maybe you could experiment to see what suits your needs best.

Hope this helps

Upvotes: 1

Alex Tudor
Alex Tudor

Reputation: 124

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 :)

Upvotes: 0

Related Questions