Image not taking up container height

HTML

<div class="main">
    <div class="img-container">
        <img src="http://www.lorempixel.com/120/250" alt="">
    </div>
    </div>

SCSS

.main {
    height: 200px;
    background-color: #eee;
    text-align:center;
    
    .img-container {
        background-color: #ddd;
       height: 100%;
        width: 80%; /* just to show the main container */
       
        
        
        img {
            height: 100%;
        }
        }
    }