implement zoom in zoom out and drag able JQuery

Question

I implemented the zoom in and zoom out with jQuery, and the problem is that the user can drag the image in div and thus creating a space between the image and div I want the corners of the image to not be inside the div but to be able to go outside the div I want to implement something like this and this is my project

i used this plugin for zoomin zoomout

my html code:

 <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>

default options:

 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'
    };

thanks

Answer 1

You've got mb-3 on the image. This is probably what is adding your white space on the image. You should add the mb-3 to the container of the image rather than on the image itself.

EDIT: You could try;

 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'
    };