html - Image not taking up container's height -

i have 3 elements:

.main
> .img-container
>> img

.main has definite height,
.img-container has max height equal container,
img should take containing div's height.

the problem image not constrained container's height, shown in fiddle.

please note image has limited container's height, not making vertically middle.

thanks help.

here current scss:

.main {     height: 200px;     background-color: #eee;      .img-container {         background-color: #ddd;         max-height: 100%;         width: 80%; /* show main container */          img {             height: 100%;         }     } } 

use height in .main .img-container class

demo

.main .img-container {     background-color: #ddd;     /*max-height: 100%;*/     height: 100%;     width: 80%; }