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

Question

所以我有这样的场景，我使用Pinchzoom.js库来缩放图像。它运行得很好，图书馆也很好。但我有一个场景，PINCH IN手势(在手机上(也会使图像缩小。要查看工作演示，您可以参考他们的工作演示链接。当您将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

尝试将属性minZoom设置为1。

之所以会出现这种效果，是因为它允许你缩小到比屏幕更小的尺寸，所以浏览器会将其缩小，使其适合整个手机宽度。

Answer 2

您需要添加一个属性，该属性将显示最小缩放大小。在Pinchzoom.js库中，有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>