Scaling 1-column grid gallery to fit viewport height

I'm trying to create a single-column 'one-up' gallery, where each image is presented to fit the screen as you scroll.

However, the gallery's behavior is to scale the image to fit viewport width only. When a photo's aspect ratio is taller than the viewport (i.e. 4:3 photo on 16:9 window), this results in the image container being taller than the viewport, so you can't see the full image at once. The site URL linked demonstrates this, if you view the page at 16:9 or wider.

The expected/desired behavior is for the image should be scaled by either width or height, so that the images to fit the browser viewport regardless of aspect ratio.

Is this possible with custom CSS or some sort of album configuration?

Thanks!

Try adding this to Design > Custom CSS

figure.gallery-grid-item {
    max-height: 100vh;
    height: 100%;
}

Thanks for the reply.

That's the right direction. That does limit each grid item height, but that overflows the content of the item container, and just clips the top and bottom of the image.

I thought that maybe using object-fit: contain on the img itself (by default, it's cover) would then re-scale the image properly, but there's some weird interaction with the galler-grid-item-wrapper that I don't fully understand.

(removed the above custom block for now)