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
Aamir Arabi
4,697 PointsAdd CSS that will allow all images to fill their parent element.
I don't know what to do here ? any help ?
12 Answers
Louis Adams
1,999 Pointsyou 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
mohammadshaban
1,636 PointsI 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
Laurel O'Brien
1,223 Pointswidth 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.
ricardo arteaga
540 Pointsdefinitely img{ max-width: 100%; } works.
Marco Berselli
Courses Plus Student 4,135 Pointsimg { 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
Carleen Hall
Front End Web Development Techdegree Student 3,158 PointsWorked like a charm for me
Joy Ahmed
Courses Plus Student 9,687 Pointsimg { max-width:100%; }
Pedro Ruíz
28,105 PointsI wrote in the following just to make sure only to affect images within other containers
- img { max-width:100%; }
Ben Os
20,008 Pointsmax-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
2,125 Pointsimg{ max-width: 100%; }
Iniyavel Sugumar
2,468 Pointsimg { max-width: 100%; } This should work. All the Best!
Mychael Jones
6,550 PointsI'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
Esther Strom
8,028 Pointsimg {
object-fit: fill;
}
Irfan Setiadi
Courses Plus Student 2,638 Pointsimg {
max-width : 100%;
}
Aamir Arabi
4,697 PointsAamir Arabi
4,697 PointsThanks for your help. I appreciate it :)