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 trial

HTML How to Make a Website Debugging HTML and CSS Problems Use Developer Tools

Posted by Boris Schrenzel
Boris Schrenzel
2,395 Points

How 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
Chris Bell
9,125 Points
Chris Bell
Chris Bell
9,125 Points

Hey 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

Boris Schrenzel
Boris Schrenzel
2,395 Points

Hello Chris, thanks this is helpful. I'll try this today, hopefully I can make it work.

Sjors Theuns
Sjors Theuns
6,091 Points
Sjors Theuns
Sjors Theuns
6,091 Points

You 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.

URL: http://www.binarymoon.co.uk/projects/timthumb/

Boris Schrenzel
Boris Schrenzel
2,395 Points

Thanks for the tip, this script looks great