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 How to Make a Website Styling Web Pages and Navigation Make a CSS Image Gallery

Aamir Arabi
Aamir Arabi
4,697 Points

Add CSS that will allow all images to fill their parent element.

I don't know what to do here ? any help ?

12 Answers

you need to put

img { width: 100%; }

which means that all images on your webpage will be 100% size of whatever they are in :) Kind Regards , Louis

Aamir Arabi
Aamir Arabi
4,697 Points

Thanks for your help. I appreciate it :)

I tried img { width: 100%; } but did not work.

This should work:

img { max-width: 100%; }

But I am not sure if I understand the difference between width and max-width. Can someone explain it for us please?

Regards, Mohammad

width will set the width as that, always. max-width means it can be less than the value you set, but never larger. I'm guessing useful for smaller images that you don't want the browser resizing without writing special code just for smaller images.

definitely img{ max-width: 100%; } works.

img { width: 100% ; max-width: 100%; } This will work all of the time.

mohammadshaban,

My understanding is that width is the direct ratio to its parent whereas max-width is the upper boundary to its size. so img{ width: 75% ; max-width: 1000px; } means that the image will have a size of 75% of its parent UP TO 1000px, but then it wont get any bigger regardless of the parent container. Hope that helps

img { max-width:100%; }

I wrote in the following just to make sure only to affect images within other containers

  • img { max-width:100%; }
Ben Os
Ben Os
20,008 Points

max-width: 100% does work but note that it does not command the images to fill everything up, instead it's just define the limits for filling; I can say that the question is a bit ambiguous, and I would phrase "set width limit" or something of that sort --- If the user knows the command "max-width: ;" --- She\he knows.

Rajesh Mule
Rajesh Mule
2,125 Points

img{ max-width: 100%; }

img { max-width: 100%; } This should work. All the Best!

Mychael Jones
Mychael Jones
6,550 Points

I'm a professional web developer and have been developing webpages for over 15 years. The answer to this question is 100% incorrect. img {max-width: 100%;} will work as the answer on the test, but IRL max-width sets the limit for the maximum width an element should be displayed. Example: img {max-width: 250px;} means that the picture should never exceed 250px. If you wanted the picture to be displayed at 250px, you would use img {width: 250px;}. Likewise, you can also set a minimum width using min-width.

Width references: http://www.w3schools.com/cssref/pr_dim_width.asp Max-width references: http://www.w3schools.com/cssref/pr_dim_max-width.asp