Jump to content
Ladybug

Responsive thumbnail gallery - equal height rows?

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!

Share this post


Link to post
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. 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...