How to drag and zoom a large image in an overflow:hidden div?

Question

JavaScript

Good morning everyone, there is a picture of a map of a residential village, it’s big there, something like 8000px by 5000px.
I need to insert it into a div and make it so that a person can zoom in, zoom out, and scroll, but it’s better to drag the cursor to the left to the right to She moved (like a finger on a tablet).
You can achieve the effect of scrolling on pure css through overflow:auto:
But how to zoom it and drag it with the cursor, that's the question.
Tell me how to implement this, or perhaps there are ready-made libraries for this.



Sample code: jsfiddle.net/ds9q4h2c

Answer 1

Here is the code for you . It does not go beyond the borders, the zoom on the scroll of the mouse and in general everything is wonderful.
Rewrote the code, now it's better. True without zoom:
https://jsfiddle.net/littleguga/jveaparp/1/