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

HTML How to Make a Website Styling Web Pages and Navigation Make a CSS Image Gallery

Posted by wdgbmakhef
wdgbmakhef
712 Points

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

kindly help coz i can't understant, plz help me to solve this.

css/main.css 
a {
  text-decoration: none;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
}

#logo {
  text-align: center;
  margin: 0;
}

h1, h2 {
  color: #fff;
}

nav a {
  color: #fff;
}

nav a:hover {
  color: #32673f;
}

h1 {
  font-family: ‘Changa One’, sans-serif;
  font-size: 1.75em;
  font-weight: normal;
}

6 Answers

Sam Baines
Sam Baines
4,315 Points
Sam Baines
Sam Baines
4,315 Points

I think this should be fairly easy to do with the following code:

img {
      width: 100%;
}
wdgbmakhef
wdgbmakhef
712 Points

thank you

Anton Karpeyev
Anton Karpeyev
367 Points
Anton Karpeyev
Anton Karpeyev
367 Points

My Savior. Thank you.

Daniel Marlin
Daniel Marlin
8,128 Points
Daniel Marlin
Daniel Marlin
8,128 Points

It's usually a good idea to identify how big the parent element will be in the first place. This way you can use an image editor (photoshop for example) to resize an image that is as close to the size of the parent element before it is even uploaded. This will have a number of benefits regarding the load time of your pages.

Firstly, you won't need to reduce the size of an image using CSS if it is larger than the parent element. By uploading an image larger than it has to be, your webpage will take longer to load and will use up more bandwith.

Secondly, you won't need to use CS to increase the size of an image that is too small for its parent element. This can result in pixelation.

Finally you won't need to resize images using CSS at all. This will result in a shorter, more comprehensive stylesheet document and your HTML will not have to make file requests for files larger than they have to be.

Optimising your websites is important. Hope this helped.

Anton Karpeyev
Anton Karpeyev
367 Points
Anton Karpeyev
Anton Karpeyev
367 Points

I have the same problem. I've tried to add it to #gallery element only as well, as ALL images include the footer images as well. I tried as in the post above, and I've tried as

#gallery img {
   width: 100%
}

I keep getting an error message. And the code challenges themselves are keep getting timed-out, so with every single challenge I have to copy paste code sometimes 5 times because time-out makes me restart the challenge and rewrite my code. Very annoying.

wdgbmakhef
wdgbmakhef
712 Points
wdgbmakhef
wdgbmakhef
712 Points

i have solved this problem, coz i was missing the semi colun ( ; ) like you, that's y i was not working

Anton Karpeyev
Anton Karpeyev
367 Points
Anton Karpeyev
Anton Karpeyev
367 Points

No, it doesn't work w/ semicolon either.