neptunian/react-photo-gallery

Images vertically stretched on Safari

Opened this issue · 7 comments

cbenning commented

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

Firefox:
image

Safari:
image

iPhone XR
image

cbenning commented

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.

  • 👍4
mindfulme commented

use object-fit: cover;

  • 👎3
  • 🎉2
shnigi commented

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.

  • 🎉2
aungpkhant commented

This worked for me

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

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

  • 👍3
TooTallNate commented

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