Make different size images fit into thumbnails for gallery in CSS or JS

Question

Not sure if my question explains this well.

I have a website and need to display all of my images in a gallery. The problem that is that I have 2 types of image sizes which are consistent.

1) - 1200 x 1800 px 2) - 1200 x 800 px

I want my gallery to look similar to this:

And when you click the image they open up as their full size. I can do this part and make them open as full size, but my problem is trying to get these two different size images look right in the box layout.

When using 1 size I could make them a fixed width and height and then just hide the overlay to make them all square shaped. However when i introduced the other image size into the mix , images begin to look stretched.

Does anyone know how I can achieve this using either pure CSS or Javascript/jQuery?

Answer 1

Try to add

#your_gallery img {
     max-width: 30%;
     margin: 15px 1.5%;
     min-height: 180px;
     max-height: 180px;

}

Answer 2

Try this code

 .panel-block { float: left; width: 100%; } .panel-img { float: left; width: calc(100%/3 - 20px); height: 141px; overflow: hidden; margin: 10px; display: flex; align-items: center; background-color: #c5c5c5; } .panel-img img { width: 100%; } 

 <div class="panel-block"> <div class="panel-img"> <img src="https://dummyimage.com/1200x1800/ddd/fff"/> </div> <div class="panel-img"> <img src="https://dummyimage.com/1200x800/ddd/fff"/> </div> <div class="panel-img"> <img src="https://dummyimage.com/1200x800/ddd/fff"/> </div> <div class="panel-img"> <img src="https://dummyimage.com/1200x1800/ddd/fff"/> </div> <div class="panel-img"> <img src="https://dummyimage.com/1200x1800/ddd/fff"/> </div> <div class="panel-img"> <img src="https://dummyimage.com/1200x800/ddd/fff"/> </div> </div> 

Answer 3

I think that the best way to solve this is to generate the square thumbnails for the images. You don't need weird JS/CSS, everything is simpler and you avoid to load the full size images directly in the gallery (so everyone with a data plan would be happy and the page will load a lot faster)