如何使全尺寸图像可以像地图一样水平和垂直滚动

<div id="image-container">
  <img src="image.jpg" alt="Full-size Image">
</div>

#image-container {
  width: 100%;
  height: 100%;
  overflow: scroll;
}

img {
  width: 100%;
  height: auto;
}

var container = document.getElementById("image-container");
var image = document.querySelector("#image-container img");

container.addEventListener("scroll", function() {
  var scrollLeft = container.scrollLeft;
  var scrollTop = container.scrollTop;
  
  image.style.transform = "translate(" + -scrollLeft + "px, " + -scrollTop + "px)";
});