Images become stretchy vertically on iPhone Safari about react-photo-gallery

[crisanmm]

I applied the following style and the issue seems to be gone.

.react-photo-gallery--gallery > div {
  align-items: stretch;
  & > img {
    min-height: 100%;
  }
}

Don't know why this works, but it does...

[doowhsalf]

it seems to be the same on Chrome. Using v8.0.0

[crisanmm]

I am experiencing the same issue, does the bug have anything to do with iOS/iPadOS 15? I remember not having this issue before updating.

Tested and no issues on macOS 11.4 and Android 11. Wondering if this is caused by the WebKit implementation?

[sulaimanwebdev]

I am experiencing the same issue, does the bug have anything to do with iOS/iPadOS 15? I remember not having this issue before updating.

Tested and no issues on macOS 11.4 and Android 11. Wondering if this is caused by the WebKit implementation?

No, it has no link with IOS15. The main reason is that, the parent div of the images have "display:flex;" but there is no "align-items" by default align-items is stretch

[sulaimanwebdev]

I applied the following style and the issue seems to be gone.

.react-photo-gallery--gallery > div {
  align-items: stretch;
  & > img {
    min-height: 100%;
  }
}

Don't know why this works, but it does...

I will try that

[sergomet]

Missing width and height props for photos also prevent them from displaying stretchily.