Я работаю над масштабированием. Этот масштаб является фиксированным блоком со 100% размера окна и внутри изображения с 200% ширины фиксированного блока.

Этот зум должен работать так:

Когда курсор находится в центре окна, изображение должно быть в центре.Когда курсор находится в верхнем правом углу, изображение должно оставаться в верхнем правом углу окна (поэтому дотянитесь до изображения с помощью угла)Когда курсор находится в среднем нижнем углу, изображение должно центрироваться горизонтально и достигать общего дна, чтобы мы могли видеть среднюю нижнюю часть изображения.И так далее.

Я делаю приближение, но я не могу достичь углов идеально. Это мой фрагмент (см. Комментарии в функции 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>

Проблема в том, что я поставилfx/1.5 так какfx/2 не работает Но горизонтальное значение работает идеально.

Какое значение я могу настроить, чтобы охватить все углы? Почему левое значение (деление пикселей на 2) отлично работает, а верхнее значение - нет?