如何调整图像的大小以适应视口？

Question

我正在创建一个与此网站非常相似的网站：https://paris.demo.vigbo.com/

我现在遇到的问题是我不知道如何使主页上的幻灯片图像始终适应屏幕尺寸，其底线始终附加到视口底部。还有，当你调整窗口大小时，它保持不变。

到目前为止我尝试过：

var h= $(window).innerHeight()-115;//115 is the total height of nav + headerline
$('.slides_show').height(h);
$('.slides').height(h);

但它不起作用，因为$(window).innerHeight()不排除浏览器顶部的额外部分？

我也认为通过js实现它并不是一个好主意，尽管我对此持开放态度。我希望有人能用CSS给我一个解决方案。

提前致谢。