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?

You can do this by creating the panels as fixed size `div` elements. You can then set the image using `background-image` and set the `background-size` to `cover` or `contain`, depending on your requirements — Rory McCrossan, Mar 17 '17 at 09:25
Hi @RoryMcCrossan , i would prefer to have the images present and not use css backgrounds if this is possible — virepo, Mar 17 '17 at 09:26
Possible, but a lot more work and slower to process as you'd need to do it in JS whereas the previous is CSS only — Rory McCrossan, Mar 17 '17 at 09:27

score 0 · Answer 1 · answered Mar 17 '17 at 09:36

0

Try to add

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

}

answered Mar 17 '17 at 09:36

Carnaru Valentin

1,690
17
27

score 0 · Answer 2 · answered Mar 17 '17 at 10:09

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>

score 0 · Answer 3 · answered Mar 17 '17 at 10:26

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)

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

3 Answers3