Question

我在第一个网站上工作。我已经创建了一个大图像横幅并且它正在工作，但我在设置他的身高时遇到了问题。当我尝试使用％height执行此操作时，我的横幅消失了。当窗口很小时，我想让它响应并缩短它。这是容器div的代码和CSS样式：

＆＃13;

    #slides-container
{
	width: 100%;
	height: 400px;
	margin: 0 auto;
	position: relative;
}
#slides-container>img
{
	width: 100%;
	height: 100%;
	position: absolute;
    max-width: 100%
}
#slides-container>.arrow-button
{
	position: absolute;
	width: 50px;
	height: 50px;
	border: none;
	border-radius: 25px;
	top: 200px;
	background: none;
	color: white;
	font-size: 20px;
}
#slides-container>#button-next:hover
{
	box-shadow: 10px 0px 20px 0px black;
}
#slides-container>#button-previous:hover
{
	box-shadow: -10px 0px 20px 0px black;
}
#slides-container>#button-previous
{
	position: relative;
	float: right;
}
.slide-fade
{
	animation-name: fade;
	animation-duration: 0.2s;
}
@keyframes fade
{
	from{opacity: 0.4}
	to{opacity: 1}
}

＆＃13;

<div id="slides-container">
        <img class="slides slide-fade img-responsive" src="img/1.jpg"/>
        <img class="slides slide-fade img-responsive" src="img/2.jpg"/>
        <img class="slides slide-fade img-responsive" src="img/3.jpg"/>
        <img class="slides slide-fade img-responsive" src="img/4.jpg"/>
        <img class="slides slide-fade img-responsive" src="img/5.jpg"/>
        <button class="arrow-button" onclick="plusIndex(-1)" id="button-next">&#10094;</button>
        <button class="arrow-button" onclick="plusIndex(1)" id="button-previous">&#10095;</button>
   </div>

＆＃13;

Answer 1

您可以使用vh代替%。这是在每个视图高度中使高度响应的另一种方法。相对于视口高度的1％*

如何根据窗口大小更改图像大小

1 个答案: