How to make section hero (with image slider) always fit browser height?

Question

I'm currently working on a website but I'm having some issues. On the homepage, I have a responsive slider and I'd like it to always fit the browser height, on any size of screen/window. I've managed to make it (almost) always fit the browser height but, as it's a responsive slider, when I resize my browser window, at some point, the height diminishes to keep the ratio of the pictures.

What I'd like is that the height of the slider/pictures remains 100% of the browser window, on any size of screen (desktop/mobile), and that the pictures of the slider keep their ratio (by cutting / zooming the images in their width, but not by crushing them).

Here's the link of the homepage: http://iampox.com/juno/ And here's my HTML and css:

 /* =Home slider -------------------------------------------------------------- */ .rslides { position: relative; list-style: none; overflow: hidden; padding: 0; margin: 0; height: 100vh; } .rslides li { -webkit-backface-visibility: hidden; position: absolute; display: none; width: 100%; left: 0; top: 0; } .rslides li:first-child { position: relative; display: block; float: left; } .rslides img { display: block; height: auto; float: left; width: 100%; border: 0; } 

 <ul class="rslides"> <li><img src="img/slide1@1x.jpg" alt="Slide 1"></li> <li><img src="img/slide2@1x.jpg" alt="Slide 2"></li> <li><img src="img/slide3@1x.jpg" alt="Slide 3"></li> </ul> 

Answer 1

Depending on which browsers you want to support, you can use vh:

.rslides img {
  height: 100vh;
  width: auto;
}

Or you could try Superslides