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 Adding Pages to a Website Build the Contact Page

Posted by Larry Young
Larry Young
4,356 Points

Why is max-width not setting the size of my photo, while width works just fine?

I have assigned class="profile-picture" to a photo on my about page. When I try to set the max-width to 140 px it does not shrink it down in the preview. However, when I use width it shrinks it down just fine.

I have previously set all img elements to have max-width of 100% to fill their parent containers. As for "profile-picture" itself, it is inside of the section element. Could it have something to do with the width of the section element?

2 Answers

Matthew Garza
Matthew Garza
26,312 Points
Matthew Garza
Matthew Garza
26,312 Points

max-width is for the max-size your image will get. Width and Height actually sets the size.

William Nsambu
William Nsambu
3,502 Points
William Nsambu
William Nsambu
3,502 Points

Can you post part of your code in here please, that way we will understand better what you're talking about. :)

Larry Young
Larry Young
4,356 Points

Here is my code pen, but I haven't had a change to move the images to a directory that code pen can see so it may be hard to see what I'm talking about without seeing the image.

http://codepen.io/L89471/pen/Wxrovm?editors=1100

Hopefully this helps. Under the .profile-picture selector in css, max-width does not shrink it down to 140px but width does. My understanding of max-width at this point is it's the maximum width and it will shrink to fit. Should max-width be shrinking it down. The width property shrinks it down just right..