Images vertically stretched on Safari

[cbenning]

I was able to reproduce this on my Mac and on my iPhone XR

Firefox:

Safari:

iPhone XR

[cbenning]

I was able to fix this by adding this to my CSS:

.react-photo-gallery--gallery > div > img {
    align-self: flex-start;
}

I'm not a web guy so not really sure why it helps but it does in my case. Happy to make a PR for this if it applies in situations other than mine.

[mindfulme]

use object-fit: cover;

[mindfulme]

https://stackoverflow.com/questions/16177707/avoid-stretch-on-image-css

[shnigi]

I have the exactly same problem. All images are being stretched on IOS devices. "object-fit: cover;" places the image as cover so it basically doesn't solve the issue as the dimensions are not correct anymore.The image appears too big. Looks like align-self: flex-start; is the key, but this causes problem if I have mixed vertical and landscape photos. I have to manually adjust dimensions.

[aungpkhant]

This worked for me

.react-photo-gallery--gallery > div > img {
    max-height: 300px;
}

[madeleineostoja]

I also ran into this, setting the flex align fixes it for me. No need to target the images directly though

.react-photo-gallery--gallery > div {
    align-items: flex-start;
}

I haven't run into the issue of mixed landscape/portrait shots causing an issue, so YMMV. @neptunian any chance of merging a fix? The library is currently DOA on Safari and iOS

[TooTallNate]

Ran into this as well. Would be great to have a fix merged 😄