Image not taking up the full height of container

Question

I have the parent container project-img-main which houses the image and then I set the height as auto to match the correct proportions to the width. If you look under the image there is a small gap. I am unsure of what is causing it. I have added margin: 0 to all of the containers you see in this snippet. I also changed max-height: 700px to min and height...nothing has worked.

Does anyone see what is causing this?

#project-img-main {
 position: relative;
 margin: 0;
 width: 100%;
 height: auto;
}
#project-img-window {
 max-height: 700px;
 width: 60%;
}
#project-img-text-container {
 background: rgba(0,0,0,.7);
 position: absolute;
 width: 40%;
 height: 100%;
 left: 60%;
 z-index: 99;
 top: 0;
}
#project-img-text-block {
 text-align: center;
 position: absolute;
 top: 50%;
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
}


#blue {
  background: blue;
  height: 300px;
  width: 100%;
  }

<div id="project-img-main">
 <img src="http://optimumwebdesigns.com/eslich/images/projects/project-main3.jpg" id="project-img-window" alt="Demolition and Wrecking Projects">
   <div id="project-img-text-container">
    <div id="project-img-text-block">
    </div> 
   </div>
 </div>
<div id="blue"></div>

score 3 · Accepted Answer · answered Jun 16 '16 at 20:58

3

add display: block to the img tag (your #project-img-window)

answered Jun 16 '16 at 20:58

alliuca

396
2
13

When I saw this, I thought "Nooo, this can't be *THIS* simple!" – ruslaniv Aug 25 '20 at 06:37

score 3 · Answer 2 · answered Jun 16 '16 at 20:59

The space below is an artifact of the line-break and space after the img tag and the next div tag. This is because the img element is an inline-block. The quickest, easiest solution is to set it to display: block;

#project-img-window {
    max-height: 700px;
    width: 60%;
    display: block;
}

Image not taking up the full height of container

2 Answers2