.noaspect {width:98%; max-width:800px; margin:50px auto;}
.noaspect > div {width:100%; height:0; padding-top:50%; position:relative;}
.noaspect > div > div {width:100%; height:100%; position:absolute; left:0; top:0; background:blue;}

<div class="noaspect"><div><div></div></div></div>

.aspect {width:98%; max-width:800px; aspect-ratio:2; background:red; margin:50px auto;}

<div class="aspect"><div>

NO jQuery/javascript.

This has been a long time coming, but it is now here. A method of styling the height of an element relative to its width.

Before this new style it was only possible to do this using three nested elements, relative and absolute positions and the fact that 'padding' as a percentage height is calculated on the width of the element.

Now we can use the NEW style 'aspect-ratio' which can be used to specify the height of an element as a percentage of the width OR the width as a percentage of the height.

For full details see https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

The slideshow uses this style to reduce the html and css. The css uses variables so that it only needs minor changes for a change in the number of images.
The selected image will always slide up from the bottom no matter if it comes before or after the current image.

The slideshow also uses a CSS animation method, that can be run more than once, to place a cover over each image so that it can only be clicked once. This stop multiple clicks which would move to the next slide before the previous slide has been shown completed.