Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialBoris Schrenzel
2,395 PointsHow should i modify the css if the images are NOT all the same sizes (some are portraits, squares, etc.) ?
Hello,
I've tried using the code from this project for a gallery. But the images in my project are not all landscape and not all the same size (portraits, square, etc...).
The display is really messy. Some images are stuck on the right of the screen, alone on their row. Some are alone on their left.
I can't find a way to align the image 2 by 2 or 3 by 3 when they are not the sames size.
Should i create a thumbnail for each image ? Can I define a min-height for each row ?
Thanks
2 Answers
Chris Bell
9,125 PointsHey Boris,
Take a look at how this is done in bootstrap for the best practice. Firstly you wrap the image in a container div that will have the width you want to use (For 4 images in a row it would be 25%) then add the style "max-width:100%" to the image tag so it fills its container.
that should do the trick, don't forget to add floats to the wrapper divs.
If your have any issues take a look at responsive images on the bootstrap page www.getbootstrap.com
Sjors Theuns
6,091 PointsYou might consider using timthumb. This is a very nice (free) script to create thumbnails as you see fit. It doesn't matter what size the image is, the script can create all the same size thumbnails.
Boris Schrenzel
2,395 PointsThanks for the tip, this script looks great
Boris Schrenzel
2,395 PointsBoris Schrenzel
2,395 PointsHello Chris, thanks this is helpful. I'll try this today, hopefully I can make it work.