JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">           
    <img id="image" src="http://placekitten.com/g/200/300" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

CSS

body {
    padding: 0;
    margin: 0;
}

#image {
    -webkit-transform-origin: 0 0;
}

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

CoffeeScript

$(window).load ->

    image = $('#image')
    wrap = $('#wrap')

    width = image.width()
    height = image.height()

    offset = wrap.offset()        
    
    newX = 0
    newY = 0

    testScale = 1

    image.click (event) ->
        testScale = if event.ctrlKey then (testScale - 0.4) else (testScale + 0.4) 
        pinch event.clientX, event.clientY, testScale

    window.pinch = (x, y, scale) ->
    
        newWidth = image.width() * scale
        newHeight = image.height() * scale

        # Convert from screen to image coordinates
        x -= offset.left + newX
        y -= offset.top + newY

        newX += -x * (newWidth - width) / newWidth
        newY += -y * (newHeight - height) / newHeight
     
        image.css '-webkit-transform', "scale3d(#{scale}, #{scale}, 1)"         
        wrap.css '-webkit-transform', "translate3d(#{newX}px, #{newY}px, 0)"
        
        width = newWidth
        height = newHeight