如何利用Pinchzoom.js防止图像缩放过程中的夹点

Question

因此，我有一个场景，我使用Pinchzoom.js库来缩放图像。它工作得很好，图书馆也很好。但是，我有一个场景，在这个场景中，手持手势(在移动上)也会使图像放大。要查看一个工作演示，您可以参考他们的工作演示链接。当您将夹入时，您将观察到图像放大，但在手势结束后，它保留了原来的大小。我想问一问是否有办法禁用这种放大效果？我的PinchZoom设置如下：

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

Answer 1

尝试将属性minZoom设置为1。

这种效果之所以发生，是因为它允许你放大到一个比你的屏幕小的尺寸，所以浏览器会把它缩小，这样它就能适应整个手机的宽度。

Answer 2

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

因此，如果您不希望您的图像在压缩时放大，那么设置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>