Question

I need help centering an image inside a container with overflow:auto after enlarging the image width and height.

live demo: http://jsfiddle.net/RCw4T/1

The underlying idea is that when the user centers a section of the image inside the container and clicks zoom, the image enlarges but still remains centered on that section. that way you can continue zooming in on a section without having to hunt for the section after every click.

Answer 1

looks the script prevents giving top and left values for less than 0, if you change the logic to allow values < 0 you should get a centered zoom…

Change this

iTop = (iNewH < ipH ? (ipH / 2) - (iNewH / 2) : 0);
iLeft = (iNewW < ipW ? (ipW / 2) - (iNewW / 2) : 0);

To this

iTop = (ipH / 2) - (iNewH / 2);
iLeft = (ipW / 2) - (iNewW / 2);

EDIT:

to allow scrolling to all parts of the image (ie no negative positioning) you can use the ScrollTo jquery plugin

example fiddle

something like

if (iNewH > $container.height() || iNewW > $container.width()) {
    $container.scrollTo({ 
        top:(iNewH - $container.height()) / 2, 
        left:(iNewW - $container.width()) / 2 
    });
}

might consider changing the above logic to handle height/width separately, I’ll leave that to you.