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 trialKonstantin Golik
Courses Plus Student 3,791 PointsDifference 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
3,939 Pointsimg{
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
5,318 Pointsthe 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. ???