Jump to content

Responsive thumbnail gallery - equal height rows?


Ladybug

Recommended Posts

Hello!

I'm trying to create a responsive thumbnail gallery where all the images in the same row are equal in height. The proportions vary - some images are portrait, some landscape. I want them to scale themselves to equal height. But the rows won't have to be the same height - only the images on the same row.

My code for one thumbnail row is basically (within a container with a set max-width):

<div class="w3-cell-row w3-mobile">
    <div class="w3-cell w3-container w3-mobile w3-padding">
    <img src="img1.jpg" style="width:100%">
  </div>
  <div class="w3-cell w3-container w3-mobile w3-padding">
    <img src="img2.jpg" style="width:100%">
  </div>
    <div class="w3-cell w3-container w3-mobile w3-padding">
    <img src="img3.jpg" style="width:100%">
  </div>
</div>

Img1 is landscape, img2 and img3 are portrait - in the thumbnail gallery img1 appears taller in height than the others, why? The actual image files are all 900 px in height (width is different). 

Is there a way to force the thumbnails on the same row to be the same height? Can this be done without resizing the actual images? And can the gallery still be responsive?

 

Thank you!

Link to comment
Share on other sites

On 6/16/2017 at 2:03 PM, dsonesuk said:

What I see is exactly what you want, if you remove inline styling width: 100%; then I see img 1 being smaller.

It doesn't work. If I remove "width: 100%", the image will show in its full size (way larger than any thumbnails). I don't know what my current code is missing, but the 3 thumbnails are not equal in height. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...