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

Martin Ng'ang'a
Martin Ng'ang'a
1,223 Points
Posted by Martin Ng'ang'a
Martin Ng'ang'a
1,223 Points

Add css that willl allow alll images to fill their parent element

Some help me remember 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;
}
#img {
  max-width: 720px;
  max-height: 760px;  
}

3 Answers

Laura Cressman
Laura Cressman
12,548 Points
Laura Cressman
Laura Cressman
12,548 Points

In order to make the image fill it's parent element, you want to set the width of the image to the width of the parent element. Since it is unlikely that you will always know the width of the parent element in pixels (plus what happens if it changes?), the easiest way to do this is by expressing width as a percentage. If we want it to take up the entire width of the parent element, then we would use 100% as the max width. In CSS terms:

#img {
   max-width: 100%;
}
Alvin Lin
Alvin Lin
1,365 Points
Alvin Lin
Alvin Lin
1,365 Points

If you set the width and height to 100%, won't it accomplish the same thing? Why max-width?

Martin Ng'ang'a
Martin Ng'ang'a
1,223 Points
Martin Ng'ang'a
Martin Ng'ang'a
1,223 Points

Am glad you helped me, thanks a lot.

Matthew Greenberg
Matthew Greenberg
8,173 Points
Matthew Greenberg
Matthew Greenberg
8,173 Points 
img {
   max-width: 100%;
   max-height: 100%;
}
Michael Bredthauer
Michael Bredthauer
13,429 Points
Michael Bredthauer
Michael Bredthauer
13,429 Points

img { height: 100%; width: auto; }

put the image inside of a div element and than you can size the div any way you want.

Michael Bredthauer
Michael Bredthauer
13,429 Points
Michael Bredthauer
Michael Bredthauer
13,429 Points

no prob, I find when I use Sass it makes this kinda thing a lot easier.