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

CSS How to Make a Website Styling Web Pages and Navigation Style the Image Captions

Dor Bar
Dor Bar
8,410 Points
Posted by Dor Bar
Dor Bar
8,410 Points

Different size pictures are't fit well. What to do?

I have a problem,

I have used different images in my portfolio, my images have different sizes and different ratio between width and height.

I used exactly the same code as in the video.

What to do?

5 Answers

Isaac Asante
Isaac Asante
4,752 Points
Isaac Asante
Isaac Asante
4,752 Points

Hey Dor, nope you won't be an "image cropper". It's all about setting a professional/pleasing layout. So how the images appear is entirely up to you, the way you like it. So you can have irregular images with different height, width and ratio, but they can still look alright so long as you're creative enough to display them in a way that won't add a bunch of white space below/besides the images. However, if you are creating a new website, it's always best to have a Style Guide with you, which will comprise a list of required rules to maintain your website's layout consistency.

So, for instance, you'd want to set a range of height and width (or ratio) for your images, just so you work on them directly as you save them on your local disk, before uploading them online. It's all about knowing your work and knowing how to keep it neat. As you build your website, you'll gradually know how to render/size the items it will contain.

It depends on the approach you choose to take. Hope I helped!

Dor Bar
Dor Bar
8,410 Points
Dor Bar
Dor Bar
8,410 Points

You helped a lot!!

I have learned that I have much to learn and play with it more to get experience.

kathrynpeterson
kathrynpeterson
16,001 Points

Hey, Isaac, I just wanted to say that I thought your collective responses in this discussion thread constituted a "best answer" to the original question. You obviously know your stuff and how to present it, as well. Great job, IMHO!

Isaac Asante
Isaac Asante
4,752 Points
Isaac Asante
Isaac Asante
4,752 Points

For the beauty of your own portfolio, especially considering it's an early course, I'd say the solution is to crop your images for them to have at least the same width.

Dor Bar
Dor Bar
8,410 Points
Dor Bar
Dor Bar
8,410 Points

It seems that I don't know enough HTML to do it yet.

I will Google it... thanks!

Isaac Asante
Isaac Asante
4,752 Points
Isaac Asante
Isaac Asante
4,752 Points

Hey, you don't need knowledge in HTML to crop an image. You can use your normal Image Editor on Windows or Mac, whatever system you're using. Here's a short article with all the details: http://www.digitaltrends.com/computing/how-to-crop-a-photo-with-a-pc-or-mac/

Dor Bar
Dor Bar
8,410 Points
Dor Bar
Dor Bar
8,410 Points

So, you mean that I need to make a preview for every picture manually?

Isaac Asante
Isaac Asante
4,752 Points
Isaac Asante
Isaac Asante
4,752 Points

Basically, in CSS, you can set a specific width and height for every image for them to have a consistent layout. But the reason why I'm recommending cropping is because you said that your ratio was not equal, so in other to make them align properly and have a good look, you need to crop them and/or make the original image files have at least the same width.

Then you can think of the height after, if it still doesn't look good for you.

You get me? :)

Dor Bar
Dor Bar
8,410 Points
Dor Bar
Dor Bar
8,410 Points

Yeah! got you.

But, I want to find a way that the browser will corp it automatically. I mean, I want to create a frame that will give me a preview, If I will add another 100 images and I will need to corp every single one of them I will not be a web developer, I will be "image corper" and that's not what I want.

kathrynpeterson
kathrynpeterson
16,001 Points
kathrynpeterson
kathrynpeterson
16,001 Points

I agree with what Isaac said. (Except for the typos--"in order to," rather than "in other to"--admitted "grammar nazi" here. 8^P ) I might just add, since I did the same thing you did, in terms of images irregularly-sized from those in the instructor's examples, that I found it looked better (and least stupid to my eye, as the browser window changed sizes) to put the relatively taller and thinner images (of which I had two) in the first two positions, the one that was shortest and widest, in the third position, and the remaining two that were roughly the same dimensions as the instructor's examples (of which I also had two) in the last two positions. I did scale the images in an image editor (I'm using Gimp, though I also have access to an older version of Photoshop) first, so that at least one dimension corresponded to the instructor's given dimensions of 1024 X 768px. The images all look as though they're the same width, though they actually aren't. (browser default, or something in the "normalize.css" maybe?) I haven't uploaded the file yet as a linked sub-domain to my existing demo domain site, (which is out-of-date and needs lots of work!) so I can't point you to look and see what I did, but I will do that soon.