Q: Fit an image inside a div I'm writing a HTML where there are multiple divs and there is an auto slider with images in one of the divs. Here I'm able to see the scrolls going on and here I've 3 questions.


*

*I tried to create structure as below.



---div#container
     --div#header
       -div#headTitle
       -div#companyLogo
     --div#content
       -div#leftBar
       -div#centerBar
       -div#rightBar


and the CSS for header and content should be height of 20% and 80%. this is unfortunately not working. so, I removed div#content and added the heights to    div#leftBar, div#centerBar and div#rightBar, and this is working as expected.


*I've defined only 3 images in figure, but in the scroll I see a fourth tab with out any image, just a plain color.

*The Images are appearing in the slider, but, How can I make the image's height as that of the div#centerTop.


please let me know where am I going wrong in above three stages and how can I fix them.
Here is a working fiddle https://jsfiddle.net/462893qz/7/
Thanks

A: Updated fiddle: https://jsfiddle.net/462893qz/69/
Your math was incorrect in your slider animation. You go -400% of the figure container, but there are only 3 items in it. At 0, it shows the first image. At -100%, it shows the second. At -200% it shows the third. You don't need to go past that. That's why it's showing the plain color. It's simply the background.
Your figure container width was also set to be 500%, but only need room for 3 full-width images. (3x100)
For making the image's height equal to the #centerTop container, we need the parent containers of the slides to be the 100% of #centerTop's height. Then I changed the img tags to be div's with full image backgrounds. This helps us maintain the image ratios and fill up the space. However, you'll need images that are meant to be banners, or if you don't foresee the images changing, set the solid background colors on the image-slide divs so it LOOKS full width.
You'll have to update your animation to account for one less step.


html {
    min-height: 100%;
    /* make sure it is at least as tall as the viewport */
    position: relative;
}

body {
    height: 100%;
    /* force the BODY element to match the height of the HTML element */
}

#container {
    background-color: lightgrey;
    border: 1px solid black;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 1%;
    right: 1%;
    overflow: hidden;
    z-index: -1;
    /* Remove this line if it's not going to be a background! */
}

#header {
    height: 20%;
    color: green;
    border-bottom: 1px solid black;
}

#headTitle {
    position: absolute;
    display: inline-block;
}

#companyLogo {
    float: right;
}

#leftBar {
    background-color: red;
    width: 20%;
    height: 80%;
    float: left;
}

#centerBar {
    background-color: yellow;
    width: 60%;
    height: 80%;
    margin: 0 auto;
    float: left;
}

#rightBar {
    background-color: green;
    width: 20%;
    height: 80%;
    float: left;
}

#topRight {
    width: 100%;
    background-color: darkblue;
    height: 50%;
}

#bottomRight {
    width: 100%;
    background-color: lightblue;
    height: 50%;
}

#centerTop {
    height: 20%;
    background-color: lightblue;
    display: flex;
}

#centerBottom {
    height: 80%;
    background-color: navajowhite;
}


/** Slider Start*/

@keyframes slider {
    0% {
        left: 0;
    }
    30% {
        left: 0;
    }
    33% {
        left: -100%;
    }
    63% {
        left: -100%;
    }
    66% {
        left: -200%;
    }
    96% {
        left: -200%;
    }
    100% {
        left: -200%;
    }
}

#slider, figure {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#slider .slider-image {
    width: 33%; /* bc there are 3 images (100/3) */
    float: left;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#slider figure {
    position: relative;
    width: 300%; /* (3*100) */
    margin: 0;
    left: 0;
    text-align: left;
    font-size: 0;
    animation: 20s slider infinite;
}


/** Slider end*/
<div id="container">
    <div id="header">
        <div id="headTitle">
           
        </div>
        <div id="companyLogo">
           
        </div>
    </div>
    <div id="leftBar"></div>
    <div id="centerBar">
        <div id="centerTop">
            <div id="slider">
                <figure>
                  <div class="slider-image" style="background-image: url(https://preview.ibb.co/c5dKCc/luis.jpg)"></div>
                  <div class="slider-image" style="background-image: url(https://preview.ibb.co/e7KRsc/amazonlex.png)"></div>
                  <div class="slider-image" style="background-image: url(https://preview.ibb.co/ge9gQx/apiAi.jpg)"></div>
                </figure>
            </div>

        </div>
        <div id="centerBottom"></div>

    </div>
    <div id="rightBar">
        <div id="topRight"></div>
        <div id="bottomRight"></div>
    </div>
</div>


