I've been attempting to drag an <img> within a fixed-width and fixed-height container. Despite researching on Stack Overflow and finding this solution, it doesn't seem to work for my specific case.
If you check out this fiddle I created, you'll see what I'm aiming to accomplish: the container represents the only portion of the image that should be visible to the user, while there's a draggable image beneath it. Essentially, the .container element must restrict the image based on its orientation. Furthermore, the container should always contain part of the image itself, without any blank space. In other words, the image's borders should never extend beyond the boundaries of the container.
I attempted utilizing the containment property, but I'm having trouble understanding how the Array option functions (source).