如何在JavaScript中调整轮播图片尺寸

Question

我正在尝试制作下面给出的简单轮播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, 6000);
}

这是HTML：

<div class="slideshow-container">
<div class="mySlides fade">
  <div class="numbertext">1 / 2</div>
  <img src="images/i1.jpg" style="width:100%">
  <div class="text">Caption One</div>
</div>
<div class="mySlides fade">
  <div class="numbertext">2 / 2</div>
  <img src="images/i2.png" style="width:100%">
  <div class="text">Caption Two</div>
</div>
</div>

我想在该图像滑块上显示用户上传的任何随机图像，但我注意到图像的高度和宽度会影响周围的其他html元素，并建议是否有更有效的方法来执行此操作。