使用jQuery PanZoom拖拽双页图片无法完整查看的问题求助

看起来你遇到的问题是因为初始缩放比例设置过高，导致图片无法完整适配容器尺寸。让我帮你调整代码，实现初始状态下就能查看完整图片，同时保留平移和缩放功能：

问题根源 #

你当前设置了minScale: 1，这意味着图片最小只能保持原始尺寸——但你的容器高度（300px）远小于图片原始高度（730px），所以初始状态下只能显示图片的顶部区域。而缩放程度越高，图片超出容器的范围越大，PanZoom的拖拽功能就允许你查看更多区域，这就是为什么缩放后能看到更多内容。

解决方案 #

我们需要计算出容器能容纳完整图片的最小缩放比例，把它设为minScale和初始缩放值，这样打开页面时就能看到完整的双页图片，之后还能正常缩放和平移。

修改后的完整代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.panzoom/3.2.2/jquery.panzoom.js"></script>
<div class="buttons" id="myButtons" >
  <button class="zoom-in btn btn-primary btn-sm" type="button">Zoom In</button>
  <button class="zoom-out btn btn-primary btn-sm" type="button">Zoom Out</button>
  <button class="reset btn btn-primary btn-sm" type="button">Reset Size</button>
</div>
<div style="max-height:none;padding:0px;height:300px;width:520px;overflow:hidden;"> <!-- 加上overflow:hidden确保容器外内容隐藏 -->
  <img id="theCanvas" class="img-fluid" draggable="false" width="516" height="730" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAA0NDQ0ODQ4QEA4UFhMWFB4bGRkbHi0gIiAiIC1EKjIqKjIqRDxJOzc7ST">
</div>

<script>
var $pz2 = $("#theCanvas");
var $buttons = $('#myButtons');
var $container = $pz2.parent();

// 计算适配容器的最小缩放比例：取宽度和高度适配比例中的较小值，确保图片完全显示
var scaleWidth = $container.width() / $pz2.width();
var scaleHeight = $container.height() / $pz2.height();
var minScale = Math.min(scaleWidth, scaleHeight);

$pz2.panzoom({
  $zoomIn: $buttons.find(".zoom-in"),
  $zoomOut: $buttons.find(".zoom-out"),
  $reset: $buttons.find(".reset"),
  contain: 'invert',
  minScale: minScale,
  startScale: minScale, // 初始缩放至适配容器
  increment: 0.1 // 统一缩放增量
});

$container.on('mousewheel.focal', function(e) {
  e.preventDefault();
  var delta = e.delta || e.originalEvent.wheelDelta;
  var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
  $pz2.panzoom('zoom', zoomOut, { 
    increment: 0.1, 
    focal: e 
  });
});
</script>

关键调整点 #

1. 计算自适应缩放比例：通过对比容器和图片的宽高比，取最小的比例作为初始缩放值，确保图片能完整放入容器。
2. 设置startScale: minScale：让页面加载时直接以适配容器的比例显示图片。
3. 容器添加overflow:hidden：避免图片超出容器的部分直接显示在页面上，保持视觉整洁。

这样修改后，你打开页面就能看到完整的双页图片，点击缩放按钮或使用鼠标滚轮缩放时，依然可以拖拽查看细节，完全符合你的需求。

内容的提问来源于stack exchange，提问作者gordon613