Image Gallery

[Eyesee]

I am working on a responsive image gallery based on the page at https://www.w3schools.com/howto/howto_css_image_gallery.asp     but it has a mixture of landscape and portrait oriented images.

If landscape images are placed in the same gallery as portrait ones they sit at the top of the location and are the same width as the width of the portrait image.

What I would like to be able to do with CSS is to have the images the same size on the screen and the landscape ones centered in the height of the portrait ones, with the border around them as per the attached image.

Can't seem to get the right code to get them centered, they always want to stay at the top.

Hoping someone can assist.

Thanks
Ian C

 

[Ingolme]

It depends on the structure of your HTML. You can try making each one of the boxes a flex-box and use flex box rules to center the image inside the box.

div.gallery {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

 

[Eyesee]

 Thanks very much for that. Managed to get it to work now.

Now to get the images to link to a modal with next/previous buttons rather than to each image individually.

Ian C