Zoom auf ein Bild mit der Maus bewegen: Erreichen aller Ecken

Ich arbeite an einer Zoomfunktion. Dieser Zoom ist eine feste Box mit 100% der Fenstergröße und innerhalb eines Bildes mit 200% der Breite der festen Box.

Dieser Zoom muss folgendermaßen funktionieren:

Wenn sich der Cursor in der Mitte des Fensters befindet, sollte sich das Bild in der Mitte befinden.Wenn sich der Cursor in der oberen rechten Ecke befindet, sollte das Bild in der oberen rechten Ecke des Fensters bleiben (so erreichen Sie das Bild mit der Ecke)Wenn sich der Cursor in der mittleren unteren Ecke befindet, sollte das Bild horizontal zentriert sein und den gesamten unteren Bereich erreichen, damit wir den mittleren unteren Teil des Bildes sehen können.Und so weiter

Ich nähere mich, aber ich kann die Ecken nicht perfekt erreichen. Dies ist mein Ausschnitt (siehe die Kommentare in der Funktion 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>

Das Problem ist, dass ich dasfx/1.5 weilfx/2 funktioniert nicht. Aber der horizontale Wert funktioniert einwandfrei.

Welchen Wert kann ich konfigurieren, um alle Ecken zu erreichen? Warum funktioniert der linke Wert (Division der Pixel durch 2) perfekt, wenn der obere Wert nicht funktioniert?

Antworten auf die Frage(4)

Ihre Antwort auf die Frage