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
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 Pointsmax-width
img{
max-width: calc(100% + 3em);
margin-left: -1.5em;
}
Guil uses max-width here. What i uses width only in place of max-width? When i done the experiment , i found that i image got bigger in size and i have to scroll up and down the see the whole image. Why it happens. Can anyone help me in getting over this?
3 Answers
John Michael Robin
3,750 PointsMax-width property constrains an element's maximum width to a set value, it does not get bigger than the set value. Setting max-width to 100% means you are constraining the element's maximum width to 100% of its container which prevents it from overflowing.
Kyle Johnson
33,528 PointsThe image's default size is larger than the max-width that Guil is calculating. max-width prevents the image from getting larger than a value. width sets the image's width to a value.
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 PointsGuil set max-width to 100% . Then why image doesn't got bigger in size? Is max-width property refer to the max-width of the container or image? Please help.
Matthew Gray
5,372 PointsIt looks like to me like you are increasing the image past 100% with the + 3em value. That could be why you are getting the scroll bars.