Need image to fill height of div

Question

I did do many searched for this but anything I try is not working. I need the image to fill the height of the div, the extra image can get off to the right. But anything I try is not working... What am I missing? I don't want to see any red in this box but yet keep the proportions of the image. Thank You!

https://jsfiddle.net/rhwx23o4/6/

<figure id="main-img"><img src="http://http://www.kimwilddesigns.com/web-lesson/4-4_start/images/hp_main-img_1.jpg"/></figure>

figure#main-img {
width:100%;
min-height: 200px;
background-color: red;
    overflow: hidden;

}
figure#main-img img {
    width: 100%;
    object-fit: contain;
}

Answer 1

You can use height: 100vh;

https://jsfiddle.net/rhwx23o4/65/

figure#main-img {
width:100%;
height: 100vh;
display: block;
background-color: red;
    overflow: hidden;

}
figure#main-img img {
    height: 100vh;
    object-fit: contain;
}