The image is not full width in large viewports

[parsagholipour]

When I inspect in Chrome and resize the viewport to a big value like width = 1700px the image becomes small and resizing back doesn't fix it too.

You can check it here
https://arcane-fortress.com/products/stained-glass-radiant-100-deck-box/
It gets fixed by applying the following styles to the img element:

[igordanchenko]

It looks like you are not providing height attributes in the srcSet array elements.

Adding height attributes should address this issue.

[igordanchenko]

Hmmm... I'm still unable to reproduce this issue locally. Interesting observation - this happens only in Chrome (Safari and Firefox render as expected)

Can you add trace logging with the following patch-package patch - https://gist.github.com/igordanchenko/63cabe372a3160efba1dd9a74c6b1ee0

[parsagholipour]

I installed the patch.
Some logs when this problem occurred:
chrome.log

The image is smaller than the container:

and giving width: 100% fixes.

[igordanchenko]

Thank you for adding trace logging.

Normally, the lightbox controller renders with containerRect: undefined only one time during the initial render. However, in your case this happens 3 times as if the lightbox re-mounts and renders again from scratch.

However, I'm not sure it actually contributes to the issue you are facing.

Anyway, it looks like the following CSS style should do the trick in your case:

.custom_yarl .yarl__slide_image {
  flex: 1;
}

[parsagholipour]

Yes, because I added key={windowWidth} hoping it fixes the issue.
The css alone doesn't fix. Should also unset max height.

[igordanchenko]

The css alone doesn't fix. Should also unset max height.

Not really. You are not passing height prop in the srcSet again. You won't need to unset the maxWidth and maxHeight once you add the height attribute back.

The lightbox incorrectly calculates the maxHeight in this case. I'll add a safeguard against the invalid srcSet data.