javascript - jquery中心图像放大后溢出:auto container

Question

在放大图像宽度和高度后，我需要帮助将图像在具有溢出:自动的容器内居中。

现场演示:http://jsfiddle.net/RCw4T/1

基本思想是，当用户将图像的一部分置于容器内并单击缩放时，图像会放大，但仍保持在该部分的中心。这样您就可以继续放大某个部分，而不必在每次点击后寻找该部分。

Answer 1

看起来脚本阻止提供小于 0 的 top 和 left 值，如果您更改逻辑以允许值 < 0，您应该获得居中缩放...

改变这个

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

至此

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

编辑:

要允许滚动到图像的所有部分(即无负向定位)，您可以使用 ScrollTo jquery插件

example fiddle

类似的东西

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

可能会考虑更改上述逻辑以单独处理高度/宽度，我将其留给您。