Need image to fill height of div - html

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;
}

Answer 2

Just a little bit of work around. On the breakpoint i.e here 840px I gave property display:none to your image and gave outer div background of same image.
NOTE: In media query I had to hard-code the max-width. It won't be same for all images.
figure#main-img {
width: 100%;
min-height: 200px;
background-color: red;
overflow: hidden;
}
figure#main-img img {
width: 100%;
}
#media (max-width: 840px) {
div {
background: url('http://www.kimwilddesigns.com/web-lesson/4-4_start/images/hp_main-img_1.jpg');
height: 200px;
background-size: cover;
background-position: center center;
}
img {
display: none;
overflow: auto;
min-height: 200px;
max-height: 200px;
}
}
figure {
margin: 0px;
}
<figure id="main-img">
<div><img src="http://www.kimwilddesigns.com/web-lesson/4-4_start/images/hp_main-img_1.jpg" /></div>
</figure>

Answer 3

Try this CSS. Is this what you want? I gave the image a display property of block and changed the object-fit to cover instead of contain.
figure#main-img {
width:100%;
min-height: 200px;
background-color: red;
overflow: hidden;
}
figure#main-img img {
display: block;
min-height: 200px;
width: 100%;
object-fit: cover;
}

Answer 4

Check this https://jsfiddle.net/rhwx23o4/76/
Added height="100%" and width="100%" to the image tag

Answer 5

You can just use display: flex; in <figure> like this codepen:
figure#main-img {
width:100%;
min-height: 200px;
background-color: red;
overflow: hidden;
display: flex;
}
Flex has magical powers to adjust content within it.
In case you do not want <figure> to take up whole screen width (which it would being a block element), you can change its display to display: inline-flex; and then add a certain width/max-width to it.