How to create 3 column same height image gallery?

<div class="gallery">
      <div class="gallery-item" *ngFor="let img of images;let i = index;">
        <img class="gallery-image"  [src]="img.image_path" >
        </div>
  </div>

.gallery img {
        width: 33%;
        height: auto;
        padding-right: 3px;
    }
    .gallery {
        display: inline-block;
    }

I have tried this. but when upload various height image its not looks good. give me a idea. thanks.

Hi hariyogi19971995!

Please tell us what you think would look good. :slight_smile:

I have to admit I’m a little confused. :blush:
Is the posted code an incomplete snippet of what you have, I mean there’s only one item in the “gallery” and it is the gallery that’s displayed inline-block instead of the “gallery-item”?

If that’s a typo and it’s actually the “gallery-item” that are displayed inline-block, you could set the vertical-align property to align the items.

The same as the physicle galleries down town usually do when they display pictures in a row. Usually bottom aligning different heights, I think. :slight_smile:

1 Like

If you want three columns and each row of images to have the same height then you could use object-fit:cover on the image to make it fit better. Using flexbox rows can all have the height of the largest item so you would end up with a page like this:

http://www.pmob.co.uk/temp2/gallery-test3.html

However object-fit is only supported in modern browsers (not IE11) so in IE 11 you would see rows of images but just uneven heights which may be acceptable. If that is not acceptable then you would need to add some JS to turn the foreground image into a background image so that background-size:cover can be used instead.

I have an example of that approach here:

http://www.pmob.co.uk/temp2/gallery-test.html

You will notice that in modern browsers each row of images are the same height but rows may differ in height due to the fact that flexbox is finding the tallest height of the images and then scaling the others to match. If you want the same height of the images over various rows then you can use the aspect ratio padding hack to achieve that like so.

http://www.pmob.co.uk/temp2/gallery-test2.html

I believe that covers all eventualities :slight_smile:

2 Likes