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 Layout Box Model Concepts Quiz: Box Model Concepts

Avula VenkataBasavaraju
Avula VenkataBasavaraju
1,034 Points
Posted by Avula VenkataBasavaraju
Avula VenkataBasavaraju
1,034 Points

img{ width:100%; max-width: 600px; } When viewport is 720px; what is the width of the image? Please explain.

Lets assume the image size is 320px X 90px and other image is 1080px X 720px

Options: A. 600px B. 720px C. 100% D. Auto

1 Answer

Nils Kriedner
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Nils Kriedner
Full Stack JavaScript Techdegree Graduate 30,932 Points
Nils Kriedner
.a{fill-rule:evenodd;}techdegree seal-36
Nils Kriedner
Full Stack JavaScript Techdegree Graduate 30,932 Points

Hi Avula,

if you set the width to 100% and the max-width to 600px it basically means that the image width will be the same size as the screen width for every screen size lower than 600px.

For example if the screen width is 473px the width of the image will also be 473px (100%). But if the screen width is 890px the image width will be only 600px BECAUSE the max-width is set to 600px, so it can not get wider than 600px.

Does that make sense? Best wishes, Nils