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

Question

我正在第一个网站上工作。 我创建了一个大图像横幅，它可以工作，但是设置他的高度有问题。 当我尝试以％高度执行此操作时，我的横幅消失了。 我想使它响应，并在窗口较小时使其更短。 这是我的容器div的代码和CSS样式：

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

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

Answer 1

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