如何使用Pinchzoom.js防止Pinch IN缩放图像

问题描述

因此，在这种情况下，我正在使用Pinchzoom.js库来缩放图像。这是完美的工作，图书馆很好。但是我有一个场景（移动中的PINCH IN手势）也会使图像缩小。要查看有效的演示，可以参考其有效的demo link。当您捏入时，您会观察到图像会缩小，但是手势结束后，它将保持其原始大小。我想问问是否有办法禁用这种缩小效果？我的PinchZoom设置为：

    Array.from(document.querySelectorAll('.myimages')).forEach(function (el) {
        new PinchZoom.default(el,{
            tapZoomFactor: 5,maxZoom: 10,use2d: true,verticalPadding: 1,draggableunzoomed: false
        });
    });

解决方法

尝试将属性minZoom设置为1。

之所以会出现这种效果，是因为它允许您缩小到小于屏幕的大小，因此浏览器会将其缩小以适合整个电话宽度。

您需要添加将说明最小缩放大小的属性。在 Pinchzoom.js 库中，有 minZoom属性。

因此，如果您不希望缩小图像，则设置 minZoom：1 。

我通过将minZoom属性添加到演示链接来尝试了此设置，并且它工作正常。

Array.from(document.querySelectorAll('.myimages-container')).forEach(function (el) {
        new PinchZoom.default(el,{
            tapZoomFactor: 5,maxZoom: 10,minZoom:1,use2d: true,verticalPadding: 1,draggableUnzoomed: false
        });
    });

如果此解决方案不适合您，则可能是您选择元素时出现了问题。

使用容器 <div>作为每个图像的父级，然后将设置应用于该父级<div>。

<div class="myimages-container">
<img src="my_image.jpg"></img>
</div>

javascript jquery pinchzoom zoom