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

css

how do you Add CSS that will allow all images to fill their parent element. examples help, please and tank you

2 Answers

Stone Preston
Stone Preston
42,016 Points

Here is a pretty big hint:

you are going to have to select all images with a

img { }

selector. Inside the selector you need to use the max-width attribute and set that using a percentage

Chris Shaffer
Chris Shaffer
12,030 Points

To add on to Stone's answer, the syntax may need to match the exact element you're targeting. So, let's say you want to target only the image inside the div with class "image".

You'll want to use the syntax

ParentElement TargetElement { max-width: % }

So,

div.image img { max-width:100% }

In this example, the div.image would be the parent element and the img would be the target element. It's more likely that if you want an image to fill it's parent element, it won't be a global instruction; you'll just want that one image to fill, then other other images aren't affected. If you just use img { max-width: % } it will affect all images.

Then again, you could set this as the default global property for img and then change on a more specific selector for other images.