Image to fit a div automatically - html

Question

I'm just looking for some advice on my approach to cloning a website. To improve my CSS skills, I've found a website that I'm basically trying to copy in order to get used to CSS syntax ect.
For the divs inside the wrapper, I'm given widths of 100% for them all, and a total height of wrapper 100vh. Between all the divs I've tried to 'approximate' what the height for each div would be - meaning I'm doing it manually. It looked well and good until I added an image (taken from the website) and inserted it into the div image. This resulted in only a portion of the image showing within the div, clearly my height approximation wasn't right. Meaning I had to give it more height, and the others divs less height to make it work. Clearly this isn't a great approach and was hoping for someone to suggest a better way.
<div id = "wrapper">
<div id = "header">
</div>
<div id = "navigation">
</div>
<div id = "image">
</div>
<div id = "repairs">
</div>
<div id = "whitespace">
</div>
<div id = "footer">
</div>
</div>
CSS
#wrapper{
width:100%;
height:100vh;
background-color: black;
margin:0;
padding:0;
}
#header{
width:100%;
height:4vh;
background-color: #ededed;
}
#navigation{
width:100%;
height:16vh;
background-color:white;
}
#image {
width:100%;
height:30vh;
background-image:url("image.png");
}
#repairs {
width:100%;
height:20vh;
background-color:green;
}
#whitespace{
width:100%;
height:20vh;
background-color:purple;
}
#footer{
width:100%;
height:10vh;
background-color:blue;
}

Answer 1

height: auto;
Simply add this css

Answer 2

You can add background-size:contain to the list of #image properties to make the background image fit completely inside the container, or use background-size:cover to make it completely cover the container.
If you use contain, you may also want to use something like background-position: center center to position it in the middle of the div.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position