#1003 – Slideshow - Need tall, vertical images to resize to max height

I'm working on a development site here. https://brokenarrow.cloudaccess.host/index.php/properties/2-build-your-dream-home-creede

I have the Showtime Gallery set to Slideshow and using the LightGallery Renderer.
Most of the images are landscape, with one exception (the second image is very tall, and more narrow).
How can I scale the tall image to "match" the first image, or something like that, so that the slideshow stays close to the same height?

Hi Kara,

Having images with different ratio in a slideshow is not a good idea. It will always result in extra space. It's a matter of physics.
Here is what I suggest:

1. Use a different layout, not slideshow.
2. Keep the slideshow layout but make sure the images have the same ratio.
3. Keep the slideshow as it is and I will provide some code that will adjust the slideshow height depending on the current image height. Note that this is not a good practice since it will change the slideshow (and the page) height each time you have a tall image.

Regards

I added this CSS. It seems to be accomplishing what I wanted. Do you see any potential major issues with this?

.showtime-slideshow .showtime-image img {
    width: auto !important;
    max-height:666px !important;
    outline: solid 1px transparent;
    margin: auto;
}

See it in play here: https://brokenarrow.cloudaccess.host/index.php/properties/2-build-your-dream-home-creede

Nevermind. I realize this doesen't work for resizing screens, aka tablets and phones.
Ugh. I just want the vertical images to fill in with gray on each side, rather than skew the whole thing.

You can try to set a fixed height in that case. In order to adapt to all screens you can use viewport height. Example (not tested):

.showtime-slideshow  {
    width: auto !important;
    height: 70vh !important;
}
.showtime-slideshow .showtime-image img {
    width: auto !important;
    height:100% !important;
}