How to calc of image zoom movement(x,y) ?

[samhuang1111]

I am making a similar function of the picture zoom interface

How to achieve the same effect by changing top, left, and scale

I don’t know how to calculate the movement of the picture when it is zoomed out or zoomed in

The ratio of the picture (img) and the outer frame (div) (overflow: hidden) is not the same

html dom structure is like this

div {
  width:1000px;
  height:1000px;
  overflow: hidden;
  display: flex;
  align-items: center; // child image vertical center
}
img{
  width: 1000px; 
  height: 800px;
  position: relative;
  top: 0;       // cagene this value 
  left: 0;        // cagene this value 
  transform: scale(1);     // cagene this value 
}

<div>
   <img src="image.jpg">
</div>

sorry my english is bad

[jackmoore]

Hi, your english is just fine. Sorry, this is more than I want to get into as I don't know the answer without sitting and experimenting, same as you. Good luck with your project!