JSFiddle - React, Tailwind, and code Playground

HTML

<img src="http://growl.cz.cc/drag/baboon.png" />

CSS

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

JavaScript

var $img = $('img');  // Cache the image. Better for performance.

      $img.draggable();


      $img.css({left: ($('body').width() / 2) - ($img.width() / 2)})
          .css({top: ($('body').height() / 2) - ($img.height() / 2)})

          
      $(document).keydown(function(event) {

          var offset = $img.offset(); 

          if (event.keyCode == 38) {
              var adjustment = 1.25;
          } else if (event.keyCode == 40)  {
              var adjustment = 0.8;
          } else {
              return;
          }
                
          var width = $img.width();
          var height = $img.height();
    
          var newWidth = width * adjustment;
          var newHeight = height * adjustment;
    
          var diffWidth = newWidth - width;
          var diffHeight = newHeight - height;

          var hcenter = $('body').width() / 2;
          var vcenter = $('body').height() / 2;
             
          var leftPercent = (hcenter - offset.left) / width;
          var topPercent = (vcenter - offset.top) / height;
    
          $img.offset({top: offset.top - (diffHeight * topPercent), left: offset.left - (diffWidth * leftPercent)});
                
          $img.width(newWidth).height(newHeight);

        });