Allow pinch to zoom when displaying an image

[tinganho]

It would be great if you could support pinch to zoom when opening an image.

[bschlenk]

This would be great. I'm working on an app that involves pixel art, so it would be helpful if I could zoom in on the images while viewing them. Additionally allowing the scaling algorithm to be configured, so pixel sprites didn't appear blurry when zoomed in.

[pmartindev]

@bschlenk Same. I am working on a similar project that involves < 50x50 pixel mazes. It's very tedious switching back and forth between apps just to enlarge the image.

[bpasero]

This feature request will not be considered in the next 6-12 months roadmap and as such will be closed to keep the number of issues we have to maintain actionable. Thanks for understanding and happy coding!

[bpasero]

@tinganho @bschlenk @pmartindev how about when you click the image it just enlarges to fill the entire width of the editor? In the same way you can click an oversizes image to show its natural dimensions already.

[bschlenk]

@bpasero that would be more consistent with the current behavior. But going full width might be too huge for images that are small. What if the image was applied as a background with background-size: contain? That way it would be fully visible in the window.

[tinganho]

@bpasero certainly better than today, but not optimal. FYI, there is a pinch to zoom API in Chrome.

Figma are using it:
https://blog.figma.com/building-a-professional-design-tool-on-the-web-6332ed4f1fcc

[bschlenk]

@tinganho See my pull request, that's exactly what I'm using #38538. But I think @bpasero's comment is more about keeping the interface consistent, not about implementation details.

[bpasero]

@bschlenk @tinganho we could have both, clicking to toggle between normal and zoomed size (to be consistent with what we do currently with too large images) and pinching for the incremental zooming.

I think displaying an icon zoomed out of the box is not right because at first it should have its normal dimensions.

[bschlenk]

I have an idea but it would break the current behavior.

Images start out centered in the page and their natural size, or fit within the window if they are larger. Clicking the image zooms it in by some factor, and alt clicking zooms out (like photoshop). Pinch and ctrl + scroll do more fine grained zooming. This would keep both scenarios (undersized vs oversized images) consistent.

I don't think there is a good way to keep the behavior consistent while keeping the current behavior.

[mjbvz]

Fixed by #38538