Ladybug Posted June 16, 2017 Share Posted June 16, 2017 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 More sharing options...
dsonesuk Posted June 16, 2017 Share Posted June 16, 2017 What I see is exactly what you want, if you remove inline styling width: 100%; then I see img 1 being smaller. Link to comment Share on other sites More sharing options...
Ladybug Posted June 17, 2017 Author Share Posted June 17, 2017 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now