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

Question

所以我有这个场景，我正在使用 Pinchzoom.js library for zooming images. It is perfectly working and the library is very good. But I have a scenario where the PINCH IN gesture (on mobile) also makes the image zoom OUT. To see a working demo, you can refer to their working demo link。当您将 PINCH IN 时，您会观察到图像缩小，但在手势结束后，它仍保持其原始大小。我想问一下有没有办法禁用这个缩小效果？我的 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

尝试将属性最小缩放设置为 1。

出现这种效果是因为它允许您缩小到比屏幕小的尺寸，因此浏览器会缩小它以适合整个 phone 宽度。

Answer 2

您需要添加属性以告知最小缩放尺寸。在 Pinchzoom.js 库中有 minZoom 属性。

因此，如果您不希望在 pinch-in 上缩小图像，则设置 minZoom:1。

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

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>

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

How to prevent Pinch IN Zooming of Image using Pinchzoom.js

javascript

jquery

css

zooming

pinchzoom