Zoom image to larger version from srcset

[bcole808]

If using srcset, the ability to zoom in becomes limited.

Steps to re-create this issue:

1. Open example from codepen: https://codepen.io/fancyapps/pen/bqbpbO?editors=1000
2. Shrink browser viewport to a small size (i.e. 500px wide)
3. Click thumbnail to open fancybox (see that it displays the image "1_small_640x427" which is the correct and appropriate size for the viewport).
4. Click to zoom in on the image.

Expected behavior: The image should zoom in to show a much larger version of the image since larger sources are available via srcset.

Current / Problematic behavior: The image zooms in only slightly, and shows an enlarged (100% scale) version of the 640x427 source. The user doesn't really get to zoom in much more than a few pixels.

To emulate desired behavior using the codepen:

1. Make viewport very large
2. Click thumbnail to open fancybox (see that it displays "1_large_1600x800")
3. Shrink viewport to approximately 500px, with fancybox still open.
4. Click to zoom in
5. See image zooms in significantly to show original image at 100%.

More notes

When the user zooms in on the image, we would likely need to update the sizes property of the image to be specific pixel value to represent the new size we are zooming to. That way the browser will download a higher resolution source automatically. In other words, if we were able to zoom into a 3840px image then it would need to change from sizes="100vw" to sizes="3840px" when we zoom in.

[jleifeld]

It would be awesome if this would be integrated 👍

[kitsguru]

This is standard browser behaviour. When using srcset, once an image is loaded, resizing the window will not generate a new fetch as it increases bandwidth use. If you refresh the page or clear the cache it should load the expected image.