How to change image size depending window size - html

Question

I'm working on my first website. I've created a big image banner and it's working but I have a problem with setting his height. When I try to do this with % height my banner disappears. I would like to make it responsive and make it shorter when the window is small. Here is my code and CSS styles for container div:
#slides-container
{
width: 100%;
height: 400px;
margin: 0 auto;
position: relative;
}
#slides-container>img
{
width: 100%;
height: 100%;
position: absolute;
max-width: 100%
}
#slides-container>.arrow-button
{
position: absolute;
width: 50px;
height: 50px;
border: none;
border-radius: 25px;
top: 200px;
background: none;
color: white;
font-size: 20px;
}
#slides-container>#button-next:hover
{
box-shadow: 10px 0px 20px 0px black;
}
#slides-container>#button-previous:hover
{
box-shadow: -10px 0px 20px 0px black;
}
#slides-container>#button-previous
{
position: relative;
float: right;
}
.slide-fade
{
animation-name: fade;
animation-duration: 0.2s;
}
#keyframes fade
{
from{opacity: 0.4}
to{opacity: 1}
}
<div id="slides-container">
<img class="slides slide-fade img-responsive" src="img/1.jpg"/>
<img class="slides slide-fade img-responsive" src="img/2.jpg"/>
<img class="slides slide-fade img-responsive" src="img/3.jpg"/>
<img class="slides slide-fade img-responsive" src="img/4.jpg"/>
<img class="slides slide-fade img-responsive" src="img/5.jpg"/>
<button class="arrow-button" onclick="plusIndex(-1)" id="button-next">❮</button>
<button class="arrow-button" onclick="plusIndex(1)" id="button-previous">❯</button>
</div>

Answer 1

You can use vh instead of %. It is the other way to make the height responsive in every view height. Relative to 1% of the height of the viewport*