Image not being dragged correctly when zoomed in

Question

I am encountering issues with the function provided below. When an image is zoomed in, it becomes possible to drag beyond its bounds. This issue results in a gap between the image and its container, and this gap increases as the image scale increases.

It appears that the getBoundingClientRect method is accurately capturing the updated dimensions of the image as it scales. Despite this, the cause of the problem remains.

Any suggestions for this issue would be greatly appreciated.

dragMove(event) {
    if (this.isDragging && this.imageScale > this.minZoom) {
        const containerRect = this.$refs.croquisContainer.getBoundingClientRect();
        const imageRect = this.$refs.croquisImage.getBoundingClientRect();
    
        const maxOffsetX = (imageRect.width - containerRect.width) / 2;
        const maxOffsetY = (imageRect.height - containerRect.height) / 2;
    
        const deltaX = event.clientX - this.lastX;
        const deltaY = event.clientY - this.lastY;
    
        const newOffsetX = this.offsetX + deltaX;
        const newOffsetY = this.offsetY + deltaY;
    
        this.offsetX = Math.max(Math.min(newOffsetX, maxOffsetX), -maxOffsetX);
        this.offsetY = Math.max(Math.min(newOffsetY, maxOffsetY), -maxOffsetY);
    
        this.lastX = event.clientX;
        this.lastY = event.clientY;
    }
}

JSFiddle: https://jsfiddle.net/n4d7txwy/

UPDATE

This solves the question

const maxOffsetX = (imageRect.width - containerRect.width) / (2 * this.imageScale);
const maxOffsetY = (imageRect.height - containerRect.height) / (2 * this.imageScale);

Answer 1

Looks like you need to figure in the current scale factor in your max offset calculations - with

const maxOffsetX = (imageRect.width - containerRect.width) / 2 / this.imageScale;
const maxOffsetY = (imageRect.height - containerRect.height) / 2 / this.imageScale;

it seems to behave as it should, see https://jsfiddle.net/bzdwL914/