JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">           
    <img id="image" src="https://c2.staticflickr.com/6/5580/14914022027_6f1efdebc7_k.jpg" width="400" />
</div>

CSS

body {
    padding: 0;
    margin: 0;
}

#image {
    transform-origin: 0 0;
}

#image, #wrap {
    transition: 250ms ease-in;
}

JavaScript

var height, image, newX, newY, offset, testScale, width, wrap;
  image = $('#image');
  wrap = $('#wrap');
  width = image;
  height = image.height();
  offset = wrap.offset();
  newX = 0;
  newY = 0;
  testScale = 1;
  image.click(function(event) {
    testScale = event.ctrlKey ? testScale - 0.4 : testScale + 0.4;
    return pinch(event.clientX, event.clientY, testScale);
  });
  return window.pinch = function(x, y, scale) {
    var newHeight, newWidth;
    newWidth = image.width() * scale;
    newHeight = image.height() * scale;
      console.log(offset.left, offset.top)
    x -= offset.left + newX;
    y -= offset.top + newY;
    newX += -x * (newWidth - width) / newWidth;
    newY += -y * (newHeight - height) / newHeight;
    image.css('transform', "scale3d(" + scale + ", " + scale + ", 1)");
    wrap.css('transform', "translate3d(" + newX + "px, " + newY + "px, 0)");
    width = newWidth;
    return height = newHeight;
  };