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 Portfolio

Posted by Ravit Ben-Shlush
Ravit Ben-Shlush
3,689 Points

what gives the images the correct height?

when changing window's size' the images's height are changing correctly as well. but we didn't define height for them. How can I make height flexible as well as the width?

4 Answers

Jeff Lemay
Jeff Lemay
14,268 Points
Jeff Lemay
Jeff Lemay
14,268 Points 
img {
  max-height: 100%;
  /* and for width */
  max-width: 100%;
}
Ravit Ben-Shlush
Ravit Ben-Shlush
3,689 Points
Ravit Ben-Shlush
Ravit Ben-Shlush
3,689 Points

Hi, thanks. I still can't see why this fixed it (at first i did 'height: 100%', and the problem i had was that the images were very "high" ( i think they had their original file height, as if i was looking at them with 'paint' or something...)) Anyway, when writing 'max-height: 100%' it means that the image can be as height as the parent's content height, right? But we never mentioned specifically the height and width of the parent (or the parent's parent) by pixels, only by percentages.. So why 'max-height: 100%' cut my image height eventually?

Jeff Lemay
Jeff Lemay
14,268 Points
Jeff Lemay
Jeff Lemay
14,268 Points

The 'height' property will ignore the pictures original size and force it to be as tall as you specify (you do not want this in most cases, it will skew your image). 'Max-height' will allow your picture to maintain its original size unless the parent element is shorter than the image, in which case the image will scale down proportionality (I don't believe you need to specify a max-width but you'd want both so that the image scales both ways).

A max-height or max-width of 100% will never 'cut' your image unless the parent element is bigger than the screen (in which case you'd probably have scroll bars to see the rest of the image).

I'm not sure if this explains everything clearly enough. Feel free to comment if things are still a little confusing. Best thing to do is test it out though; pop an image into a div/container and set some percentage and pixel widths/heights and max-width/height on the image and play around with things to see how the image reacts.

Ravit Ben-Shlush
Ravit Ben-Shlush
3,689 Points
Ravit Ben-Shlush
Ravit Ben-Shlush
3,689 Points

you said: " 'Max-height' will allow your picture to maintain its original size unless the parent element is shorter than the image, in which case the image will scale down proportionality". my question is: adding max-height: 100% did scale it down - but this means that the image's parent had a shorter height than the original image. But we never specified a height to the parent.. what gave the parent it's height ??

Jeff Lemay
Jeff Lemay
14,268 Points
Jeff Lemay
Jeff Lemay
14,268 Points

Would need to see the page or more code to tell you that. Can you post a link?

Ravit Ben-Shlush
Ravit Ben-Shlush
3,689 Points
Ravit Ben-Shlush
Ravit Ben-Shlush
3,689 Points

link. from "how to make a website" tutorials:

http://treehouse-code-samples.s3.amazonaws.com/HowToMakeAWebsite/HowToMakeAWebsite-Stage8-Video4.zip