如何使部分英雄（带图像滑块）始终适合浏览器高度？

Question

我目前正在开发一个网站，但遇到了一些问题。 在主页上，我有一个响应式滑块，我希望它始终适合浏览器高度，适用于任何尺寸的屏幕/窗口。 我已经设法让它（几乎）总是适合浏览器的高度，但是由于它是一个响应式滑块，当我调整浏览器窗口的大小时，在某些时候，高度会减小以保持图片的比例。

我想要的是滑块/图片的高度保持在浏览器窗口的 100%，在任何尺寸的屏幕（桌面/移动设备）上，并且滑块的图片保持它们的比例（通过剪切 /以它们的宽度缩放图像，但不是通过压碎它们）。

这是主页的链接：http://iampox.com/juno/ 这是我的 HTML 和 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

根据你要支持的浏览器，可以使用vh：

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

或者你可以试试Superslides