That's because a fixed height is being set
.slider{
height: 36em; // <-- HERE
width:100%;
position: relative;
overflow: hidden;
}
As the screen size decreases, the image also decreases, while the .slider maintains the same height
To fix this, remove the fixed height and change it to max-height. If the image needs to be positioned absolutely, you will have to calculate the slide's height manually using JavaScript
Jsfiddle
Javascript with jQuery
$(document).ready(function(){
$(window).resize();
});
$(window).resize(function(){
var height = $('.slider img').height();
$('.slider').height(height);
});
CSS
body{
margin:0;
}
.slider{
max-height: 36em;
width:100%;
position: relative;
overflow: hidden;
}
.slider img{
width:100%;
height: auto;
position: absolute;
top:0;
left:0;width:100%;
}
main{
margin-top: 0.1em;
}
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div class="slider">
<img src="http://www.freewalkertours.com/rio/wp-content/uploads/sites/2/2017/04/o-que-fazer-no-rio-de-janeiro-cristo.jpg" alt="">
<img src="https://mmoexaminer.com/wp-content/uploads/2017/10/sw352356.jpg" alt="" >
</div>
</header>
<main>
<h1>Hello Hello</h1>
</main>