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 Styling Web Pages and Navigation Style the Image Captions

Posted by Konstantin Golik
Konstantin Golik
Courses Plus Student 3,791 Points

Difference between width: 100%; and max-width: 100%;? (Images in portfolio)

Hi! As for me, I don't see any difference between max-width: 100%; and width: 100%, as they both fill mae the element fill its container. Are there are any differences?

2 Answers

Taylor Espejo
Taylor Espejo
3,939 Points
Taylor Espejo
Taylor Espejo
3,939 Points 
img{
    width:100%;                      
}

//vs

img{
    max-width:100%;
}

Hi Konstantin; there difference is slightly ambiguous sometimes however quite simple to understand;

"If your images are always larger than the element they are within the two rules will appear to behave the same. If an img is smaller than the parent element than the first rule will stretch it to the full width of its parent. The second rule will not."

The first rule will always fill 100% of its allocated space; if its tiny or if its massive The second rule if stretched massive wont fill 100% of the allocated space instead it will only be its default size.

I hope this makes sense

Manoj Gurung
Manoj Gurung
5,318 Points
Manoj Gurung
Manoj Gurung
5,318 Points

the answer tries to explain it but not fully. I am pretty sure other people have that problem too. Is it ok to say the following

lets say we have 100by 100px picture

width- 100% is always going to fill its container (whatever the container size) vs

max-width100% = the max width of the picture is its width ; (if container is 200 by 200px), the image is going to be 100px by 100px still. but if container size is 50px by 50px, is the container going to expand to50px by 50px itself. ???