实现放大缩小和拖动能够JQuery

Question

我用jQuery实现了放大和缩小，问题是用户可以在div中拖动图像，从而在图像和div之间创建一个空间 我希望图像的角落不在 div 内，但能够在 div 之外 我想实现类似this 这是my project

我使用this 插件来放大缩小

我的html代码：

 <div style="background-color: white; border : 1px solid #d6d6d6ee; margin: 1rem; width: fit-content;">
      <div class="zoom--actions" style="margin: 5px;">
          <a id="zoom-in"><img style="width: 25px; cursor: pointer;" src="zoomIn.png" /></a>
        <a id="zoom-out"><img style="width: 25px; cursor: pointer;" src="zoomOut.png" /></a>
        <a id="reset"><img style="width: 25px; cursor: pointer;" src="reset.png" /></a>
      </div>
      <div id="zoom-box" class="parent" style="background-color: antiquewhite; overflow: hidden;">
          <div class="panzoom" id="panzoom-element">
              <img id="main-image" class="product-main-image mb-3" src="images/1.jpg">
          </div>
      </div>
  </div>

默认选项：

 var defaultOptions = {
        animate: false,
        canvas: false,
        cursor: 'move',
        disablePan: false,
        disableZoom: false,
        disableXAxis: false,
        disableYAxis: false,
        duration: 200,
        easing: 'ease-in-out',
        exclude: [],
        excludeClass: 'panzoom-exclude',
        handleStartEvent: function (e) {
            e.preventDefault();
            e.stopPropagation();
        },
        maxScale: 4,
        minScale: 1,
        overflow: 'hidden',
        panOnlyWhenZoomed: false,
        relative: false,
        setTransform: setTransform,
        startX: 0,
        startY: 0,
        startScale: 1,
        step: 0.5,
        touchAction: 'none'
    };

谢谢

Answer 1

图片上有mb-3。这可能是在图像上添加空白的原因。您应该将mb-3 添加到图像的容器中，而不是图像本身。

编辑：你可以试试；

 var defaultOptions = {
        animate: false,
        canvas: false,
        cursor: 'move',
        contain: 'outside',
        disablePan: false,
        disableZoom: false,
        disableXAxis: false,
        disableYAxis: false,
        duration: 200,
        easing: 'ease-in-out',
        exclude: [],
        excludeClass: 'panzoom-exclude',
        handleStartEvent: function (e) {
            e.preventDefault();
            e.stopPropagation();
        },
        maxScale: 4,
        minScale: 1,
        overflow: 'hidden',
        panOnlyWhenZoomed: false,
        relative: false,
        setTransform: setTransform,
        startX: 0,
        startY: 0,
        startScale: 1,
        step: 0.5,
        touchAction: 'none'
    };