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 CSS Basics Understanding Values and Units Percentages

karan Badhwar
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
karan Badhwar
Web Development Techdegree Graduate 18,135 Points
Posted by karan Badhwar
.a{fill-rule:evenodd;}techdegree seal-36
karan Badhwar
Web Development Techdegree Graduate 18,135 Points

image

Why the Image did not shrink into the #header-box's width adjustments? it was out of the box, when we gave the #header-box width: 50%; we did that manually, and moreover we put the width of the h1 400% but as Anwar said it is 64px he multiplied it by 4 why not 400?

1 Answer

Steven Parker
Steven Parker
229,783 Points
Steven Parker
Steven Parker
229,783 Points

The image was not originally scaled relative to the container, so it was displayed as actual size from the file. Adding width: 100% to the img tag in CSS constrained it to fit inside the container.

And a percentage is always 100 times more than a multiplier. So increasing something by 400% is the same as multiplying it by 4.

karan Badhwar
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
karan Badhwar
Web Development Techdegree Graduate 18,135 Points
karan Badhwar
.a{fill-rule:evenodd;}techdegree seal-36
karan Badhwar
Web Development Techdegree Graduate 18,135 Points

so you mean to say Image does not inherit properties from the parent element? right. That means 100% = Default Font-Size right? ex:- 16px = 100% 200% = 2(16 px)

Steven Parker
Steven Parker
229,783 Points
Steven Parker
Steven Parker
229,783 Points

Some properties are inherited, and some are not. In this case, width is not inherited or constrained by default. You can look up the formal definition of an individual property like width in the MDN reference pages to see if that particular property is inherited.

And while percentage measurements can be used for both width or font size, they are two different parameters and have no relationship to each other.