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 Arun Baskaran
Arun Baskaran
Courses Plus Student 863 Points

How to add css that will allow all images to fill their parent element

I would like to add css that will allow images to fill the parent element.Could someone help , also "float: left" property is not working.

<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="/Users/Arun/Desktop/Arun/Arun-project/HowToBuildWebsite/css/main.css">
<head>
    <title>My Photos</title>
</head>
<header>
    <h1>Photo Gallery</h1>
</header>
<body>
    <section>
        <nav>
            <ul id="gallery">
                <li>
                <a href="/Users/Arun/Desktop/Arun/Arun-project/HowToBuildWebsite/img/img0.jpg" alt="">In Forum Mall</a>
                <img src="/Users/Arun/Desktop/Arun/Arun-project/HowToBuildWebsite/img/img0.jpg" alt="">
                <a href="/Users/Arun/Desktop/Arun/Arun-project/HowToBuildWebsite/img/img3.jpg">A Stylish Look</a>
                <img src="/Users/Arun/Desktop/Arun/Arun-project/HowToBuildWebsite/img/img3.jpg" alt="">
                <a href="/Users/Arun/Desktop/Arun/Arun-project/HowToBuildWebsite/img/img4.jpg">In Pondicherry</a>
                <img src="/Users/Arun/Desktop/Arun/Arun-project/HowToBuildWebsite/img/img4.jpg" alt=""></a>
            </ul>
          </li>
        </nav>
    </section>
</body>
</html>```

```#gallery {
       margin: 0;
       list-style: none;
       padding: 0;
}

#gallery li {
    float: left;
    width: 25%;
    margin: 2.5%;
    color: #bdc3c7;
}

img {
    max-width: 100%
}```

2 Answers

tobart
tobart
13,518 Points
tobart
tobart
13,518 Points

Hi Arun, there is a way to size images to full width and height of the parent. First of all i try to ensure having a height on all parent elements, like html & and body, which is far most important. Like so: 

html, body{
  height:100%;
}

Then you might want to set up your child html elements e.g. markup for the images like so: Those aren’t pretty mandatory, you could even style the container full screen with an image, but that markup keeps you flexible 

 <section id="container">
                <ul class="outerFill">
                    <li id="imgOne"></li>
                 </ul> 
        </section>

Then you need to set up your css accordingly(the different css resets need to be done before, e.g. list-style-type, margin, padding, etc.), means:

#container{
    position:relative;
    height:100%;
    overflow:hidden;
}

#imgOne{
    background-size:cover;
    background-image: url(../yourImageName.jpg);
    display:block;
    height:100%;
    position:absolute;
    width:100%;
}

This way you have your images fitting the parent elements the way you like, for example you can set different width and height for the container, and as specified before in your css, float it left or right. I am not a fan of floats that’s why i didn’t do it. But at least you can.

Hope this was helpful. Let me know. Cheers, Tobart

Shane Oliver
Shane Oliver
19,977 Points
Shane Oliver
Shane Oliver
19,977 Points

Hi Arun,

There are some problems with your markup

<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="/Users/Arun/Desktop/Arun/Arun-project/HowToBuildWebsite/css/main.css">
<head>
    <title>My Photos</title>
</head>
<header>
    <h1>Photo Gallery</h1>
</header>
<body>
    <section> <!-- I assume it's a gallery, so you don't need to add it to a navigation element -->
            <ul id="gallery"> <!-- an unordered list needs list items -->
                 <li> <!-- a list item can hold your link and image -->
                      <a href="#">In Forum Mall</a> <!-- your href should point to a page -->
                      <img src="image.jpg" alt=""> <!-- the image source should be in your project directory not somewhere else on your harddisk -->
                 </li> <!-- you can add more li to add more gallery items elements -->
            </ul>
    </section>
</body>
</html>

Your CSS

* { box-sizing: border-box; }

#gallery {
       margin: 0;
       list-style: none;
       padding: 0;
}

#gallery li {
    float: left;
    /*width: 25%;
    margin: 2.5%; this will make 4 items span 110% which will break your layout */
   width: 20%;
   margin-right: 3.3333%;  /* that's better down to 103.3333% width i'll fix it in the next selector */
    color: #bdc3c7;
}

#gallery li:nth-child(4n + 4) {
     /* remove the margin right from every 4th child */
     margin-right: 0; /* 99.9% width, so let's float it right to make it even */
    float: right;
}

img {
    max-width: 100%;
}