Question

我目前正在网站上工作，但我遇到了一些问题。在主页上，我有一个响应滑块，我喜欢它总是适合浏览器的高度，在任何尺寸的屏幕/窗口。我设法让它（几乎）总是适合浏览器的高度，但是，因为它是一个响应滑块，当我调整浏览器窗口的大小时，在某些时候，高度会减小以保持图片的比例。

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

这是主页的链接：http://iampox.com/juno/ 这是我的HTML和CSS：

＆＃13;

/* =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;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

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

或者您可以尝试Superslides

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

1 个答案: