悬停缩放不适用于正确位置

$(function() {
  function zoomIn(event) {
    var img = $(event.target);
    var pre = $("#" + img.data("preview"));
    var high;
    if ($(".highlight").length === 1) {
      high = $(".highlight");
    } else {
      high = $("<div>", {
        class: "highlight",
        width: Math.round(pre.width() / 5.5) + "px",
        height: Math.round(pre.height() / 2.5) + "px",
      }).css({
        top: 0,
        left: 0
      }).appendTo(img.parent());
    }
    pre.css("visibility", "visible");
    if (img.is(':hover')) {
      pre.css("background-image", "url('" + img.attr("src") + "')");
    }

    var posX = event.offsetX;
    var posY = event.offsetY;
    high.css({
      left: posX + "px",
      top: posY + "px"
    });
    pre.css("background-position", (-posX * 2.5) + "px " + (-posY * 5.5) + "px");
  }

  function zoomOut(event) {
    $(".preview").css({
      "background-image": "",
      visibility: "hidden"
    });
    $(".highlight").remove();
  }

  $("img").mouseover(zoomIn).mousemove(zoomIn).mouseout(zoomOut);
});

.preview {
  margin-top: 10px;
  border: 1px solid black;
  width: 350px;
  height: 500px;
  background-repeat: no-repeat;
  margin-left: auto;
  margin-right: auto;
}

.highlight {
  border: 1px dotted #ccc;
  background-color: rgba(255, 255, 255, .25);
  position: absolute;
}

.samples {
  text-align: center;
  position: relative;
}

.samples img {
  margin: 10px;
  display: block;
  border: 2px solid #6A6462;
}

.samples img:hover {
  cursor: zoom-in;
  border: 0;
  -moz-box-shadow: 2px 2px 7px 2px rgba(130, 130, 130, 1), -1px -1px 7px 2px rgba(130, 130, 130, 1);
  -webkit-box-shadow: 2px 2px 7px 2px rgba(130, 130, 130, .7), -1px -1px 7px 2px rgba(130, 130, 130, 1);
  box-shadow: 2px 2px 7px 2px rgba(130, 130, 130, .7), -2px -2px 7px 2px rgba(130, 130, 130, 1);
}

@media screen and (max-width: 767px) {
  .samples img {
    display: inline-block;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-6 samples" id="sample-1">
      <img class="img-fluid" id="zoom-1" src="https://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" data-preview="preview-1">
    </div>
    <div class="col-lg-6">
      <div id="preview-1" class="preview"></div>
    </div>
  </div>
</div>