Javascript和W3CSS奇怪的图像行为

Question

Using the W3Schools static slideshow CSS (and W3CSS): https://www.w3schools.com/w3css/w3css_slideshow.asp

However, my images are all different heights and widths, so I want to set them to be all the same height based on the size of the viewport, so I have modified the javascript for the slideshow (see below, 566 and 1280 are the dimensions of the shortest image), however, when using this javascript the slideshow comes out with 0 height, yet when reporting the "height" variable it comes out at the correct (non-zero) value.

<script>
var slideIndex = 1;

showDivs(slideIndex);

function plusDivs(n) {
    showDivs(slideIndex += n);
}

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("Gallery");
    if (n > x.length) {slideIndex = 1} 
    if (n < 1) {slideIndex = x.length} ;
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none"; 
    }
    x[slideIndex-1].style.display = "block"; 
    var height = (document.documentElement.clientWidth*566/1280);
    x[slideIndex-1].height = height+"px";
}
</script>

Answer 1

Your last line is incorrect. It should be:

x[slideIndex-1].style.height = height+"px";

Answer 2

A simple way of equalising the height of all images is to use 'vh' units in the CSS. Then it does not need any Javascript to detect or set any heights. If all images of class 'mySlides' need to be, say 50% of the viewport height:

img.mySlides { 
  height: 50vh; width: auto; 
}