If zoomed image does not fill container, keep it centered in the unfilled direction(s)

[cmeeren]

When I zoom an image and the full version does not fill the parent container (which may happen e.g. if the container is full-screen), I suggest keeping the zoomed image centered in the direction(s) in which it does not fill the container.

For example, if zooming into a magazine page in a full-screen container, the full-size image may extend vertically beyond the container (screen), but not fill the width. The current behavour makes the image slide right in the container as the user moves the mouse right, which is the opposite direction of how the image moves if it is wider than the screen. This causes some confusion and is unneccesary. It would be better if the image in this example were kept horizontally centered while allowing vertical panning like normal.

[jp-onsite]

had the same problem with small images. I used the callback function to solve this problem. I set the size of the container with the zoomed image to the size of the image.

        if (img.naturalWidth <= $('#zoomcontainer').parent().width() ) {
            $('#zoomcontainer').css('width', img.naturalWidth + 'px');
        } else {
            $('#zoomcontainer').css('width', '100%');
        }

        if (img.naturalHeight <= $('#zoomcontainer').parent().height() ) {
            $('#zoomcontainer').css('height', img.naturalHeight + 'px');
        } else {
            $('#zoomcontainer').css('height', '100%');
        }