0

这就是我目前所拥有的：

<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

对于任何帮助，我将非常感激！

4

2 回答 2

0

这是因为您的容器小于图像的 50%，因此“包含”功能不可能在中心停止，因为默认情况下它已经通过中心。

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

于 2016-08-10T14:02:21.330 回答
0

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

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

https://jsfiddle.net/ruc2y97r/

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

于 2016-08-10T14:31:21.150 回答