如何使我的 slider 具有响应高度

Question

hello guys have been trying to make this slider has responsive height so it can fix perfectly on mobile but quite cant get it maybe you can help me here is my html

<div class="slideshow-container">

<div class="mySlides fade">

<img src="images/slider3.jpg" style="width:100%">
<div class="text">LET'S CAPTURE YOUR HAPPIEST MOMENTS</div>
</div>

<div class="mySlides fade">

<img src="images/slider4.jpg" style="width:100%">
<div class="text">EXPRESS YOURSELF!</div>
</div>

</div>

<div style="text-align:center">
<span class="dot"></span> 
<span class="dot"></span> 
<span class="dot"></span> 
</div>

and the css

    .mySlides {display: none;
}
img {vertical-align: middle;
}


/* Slideshow container */
.slideshow-container {
  max-width: 1300px;
  position: relative;
  margin: auto;

}

the javascript

    var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
  setTimeout(showSlides, 2000); // Change image every 2 seconds
}

please help me am going crazy i have tried editing the css by adding height:auto; to mySlides didnt work thanks

Answer 1

.slideshow-container{ width:50vw; height:50vh }

//vw and vh stretch with respect to screen size //you can set limit of vw and vh as per you need