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

mukul lohia
mukul lohia
985 Points
Posted by mukul lohia
mukul lohia
985 Points

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

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

pls tel me what is the exact mean of this question. and if we dont use of img{ max-width:100%; } then what will happen

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;
}

4 Answers

Peter Lawless
Peter Lawless
24,404 Points
Peter Lawless
Peter Lawless
24,404 Points

You want all images (which will have an <img> tag) to fill their parent elements. So if we have some element like a <div> that we want to have a background image for, we want that image to cover the entire <div> and not overflow or repeat or anything else that would make it look bad. The use of max-width: 100% specifies that the image can take up to 100% of the width of the parent element, so that if the image's original dimensions were wider than the width of the parent element it would have to be scaled down to fit inside, but if the original image is smaller than the width of the parent element, its width will be left unchanged unless you specify a min-width or other properties like background-size.

mukul lohia
mukul lohia
985 Points
mukul lohia
mukul lohia
985 Points

sir can u tell me what is parent element

Peter Lawless
Peter Lawless
24,404 Points
Peter Lawless
Peter Lawless
24,404 Points

Sure! In HTML elements can be nested inside of other elements, like this:

<div>
    <p>Hello World!</p>
</div>

See how the paragraph element is inside the div? In HTML nomenclature this means that the <p> is a child of the <div>. Likewise the <div> is the parent of the <p> element. Let me know if you need any more explanation.

mukul lohia
mukul lohia
985 Points
mukul lohia
mukul lohia
985 Points

<!DOCTYPE html> <html> <head> <meta charset="utf-8">

<title>MUKUL LOHIA|ENTREPRENEUR</title> <link rel="stylesheet" href="css/normalize.css"> <link href="https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400i,700,700i,800i" rel="stylesheet"> <link rel="stylesheet" href="css/main.css">

</head>

<body>

<header> <a href="untitled.html" id="logo"> <h1>MUKUL LOHIA </h1> <h2>ENTREPRENEUR</h2> </a> <nav> <ul> <li><a href="untitled.html" class="selected">portfolio</a></li> <li><a href="about.html">about</a></li> <li><a href="contact.html">contact</a></li></ul></nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>natural is good</p> </a>

            </li>
             <li>
                <a href="img/numbers-02.jpg">
                <img src="img/numbers-02.jpg" alt="">
             <p>natural is good</p>
                      </a>

            </li>
             <li>
                <a href="img/numbers-06.jpg">
                <img src="img/numbers-06.jpg" alt="">
             <p>natural is good</p>
                      </a>

            </li>
             <li>
                <a href="img/numbers-09.jpg">
                <img src="img/numbers-09.jpg" alt="">
             <p>natural is good</p>
                      </a>

            </li>
             <li>
                <a href="img/numbers-12.jpg">
                <img src="img/numbers-12.jpg" alt="">
             <p>natural is good</p>
                      </a>

            </li>

          </ul>
      </section>

sir pls tell me in my code parent element is what div or section if our parent element is div then why we r using img{ max-width:100%} can i use div in place of img