Initial Zoom Issue when Image is Smaller than the viewport

[lacwebadmin]

When the image size is smaller than the viewport, the initial zoom will show the image like a shadow at the bottom. I don't how to describe it but here's the screen capture:

Here's where you can see it: https://codepen.io/frogydiak/pen/XWLKGXp

I intentionally made the last slide image smaller, the original size is w:2500 h:1666. I wonder what's causing it.

[dimsemenov]

I intentionally made the last slide image smaller, the original size is w:2500 h:1666

You changed it to 1440x810, which is a different aspect ratio compared to the original.

[lacwebadmin]

@dimsemenov In my website, I have photos that were sized 1440x810 as original and that this is still happening. Are you saying, that the data-pspw-height and width should be the original size of the photo?

[dimsemenov]

You need to provide correct image dimensions in the data-pswp-width and height attributes. Also, for zoom opening animation thumbnails aspect ratio must match the large image.

[lacwebadmin]

@dimsemenov Sorry, I'm new to PhotoSwipe but I cannot find any parameters that controls the zoom opening animation thumbnails aspect ratio. Can you point me to where do I set that please? I am just following the documentation and expect it to work but I guess not. Is it in CSS?

[thedoofus]

It's quite common for an image gallery to have a grid of square thumbnails, with the full size image being something like 1920x1080. Trying to do this with this plugin does cause the bug you described. Even with a showHideAnimationType of none.

@lacwebadmin I assume you were wanting to do something similar?

The way I've gotten around this is by using object-fit: cover on the thumbnail image. This way the image can have the same aspect ratio as the original image, but the thumbnail container appears as a square.

Hope that makes sense.

<div id="gallery">
    <a href="https://place-hold.it/1920x1080" data-pswp-width="1920" data-pswp-height="1080" target="_blank">
        <!-- Make sure your image here has the same aspect ratio as your full size image -->
        <img src="https://place-hold.it/384x216" alt="A boring placeholder image"
    </a>
</div>

<style>
#gallery > a {
    display: inline-block;
    height: 384px;
    width: 384px;
}

#gallery > a > img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
</style>