Estoy trabajando en una funcionalidad de zoom. Este zoom es un cuadro fijo con el 100% del tamaño de la ventana y dentro de una imagen con el 200% del ancho del cuadro fijo.

Este zoom debe funcionar así:

Cuando el cursor está en el centro de la ventana, la imagen debe estar en el centro.Cuando el cursor está en la esquina superior derecha, la imagen debe permanecer en la esquina superior derecha de la ventana (así que alcance la imagen con la esquina)Cuando el cursor está en la esquina inferior central, la imagen debe centrarse horizontalmente y alcanzar el fondo total, para que podamos ver la parte inferior central de la imagen.Y así.

Me acerco, pero no puedo llegar a las esquinas perfectamente. Este es mi fragmento (ver los comentarios en la función onmousemove):

var Zoom = function(imageZoom) {
  this.urlImage = imageZoom;
  this.img = undefined;
  this.$img = undefined;

  this.init = function() {
    this.loaders("on");
    this.calcs();
  };
  this.calcs = function() {
    var self = this;
    this.img = new Image();
    this.img.onload = function() {
      self.build();
    };
    this.img.src = this.urlImage;
  };
  this.loaders = function(status) {
    switch(status) {
      case "on":
        $('#loader').fadeIn(200);
        break;
      case "off":
        $('#loader').fadeOut(200);
        break;
    }
  };
  this.build = function() {
    var self = this;
    this.$img = $(self.img);
    
    $('#zoom').fadeIn(200).append(this.$img);
    
    this.$img.on('mousedown', function(e) {
      e.preventDefault();
    });
    
    // this is the problematic function
    $('body').on('mousemove', function(e) {
      e.preventDefault();
      // calc the percents of the window where
      var px = 100 * e.pageX / $(window).width(); 
      var py = 100 * e.pageY / $(window).height();

      // calc of the percent pixel of the image
      var fx = self.$img.width() * px / 100;
      var fy = self.$img.height() * py / 100;

      // render it left / 2 and top / 1.5 (the 1.5 value is imaginary!!)
      self.$img.css({'transform': 'translate('+ -(fx/2) +'px, '+ -(fy/1.5)+'px)'});
    });
    self.loaders("off");
  };
};

var zoom = new Zoom("http://dummyimage.com/2000x1230/000/fff");
zoom.init();

#zoom {
	position: fixed;;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000000;
	display: none;
}
#zoom img {
	width: 200%;
	height: auto;
	position: absolute;
	cursor: crosshair;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loader">Loading</div>
<div id="zoom"></div>

El problema es que puse elfx/1.5 porquefx/2 no funciona Pero el valor horizontal funciona perfectamente.

¿Qué valor puedo configurar para llegar a todos los rincones? ¿Por qué el valor izquierdo (división de los píxeles por 2) funciona perfectamente cuando el valor superior no lo hace?