Question

这就是我现在所拥有的：

<div id="container" style="width:400px;height:400px;overflow:hidden">
    <img id="panzoom" src="http://uploadpie.com/QBTlw">
</div>

$(document).ready(function(){
    $("#panzoom").panzoom({
        increment: 0.1,
        rangeStep: 0.1,
        minScale: 1,
        duration: 200,
        exponential: true,
        panOnlyWhenZoomed: false,

        $zoomIn: $(".controls").find(".zoom-in"),
        $zoomOut: $(".controls").find(".zoom-out"),
        $zoomRange: $(".controls").find(".zoom-range"),
        contain: 'automatic',
        onPan : function ()
        {


        }
    });
});

https://jsfiddle.net/7yhjwLhf/6/

如果我向下拖动图像，图像不会在容器顶部“停止”。我可以进一步向下拉。很难找到合适的词来形容它。

以下是两个截图：

http://uploadpie.com/Smez8

http://uploadpie.com/J2EAg

如果有任何帮助，我将非常感激!!

Answer 1

这是因为你的容器小于你的图像的50％，所以“包含”功能不可能在中心停止，因为默认它已经通过了中心。

将容器大小增加到800px / 800px，它应该更接近预期。对图像和容器进行尺寸调整，以达到预期的收容效果。

Answer 2

如果我理解你想要实现的目标，这可能会让你更接近你想要做的事情：

(function() {
  $('#panzoom').panzoom({
    startTransform: 'scale(5)',
    increment: 0.1,
    minScale: 1,
    contain: 'invert'
  }).panzoom('zoom');
})();

https://jsfiddle.net/ruc2y97r/

我认为您正在寻找的包含选项是“反转”。希望有所帮助！

jQuery panzoom平移问题

2 个答案: