search

jarvisniu / vue-zoomer

Zoom the image or other thing with mouse or touch
MIT License
150 stars 37 forks source link

Vue-zoomer resets to center when width == height #27

Closed joshjung closed 2 years ago

joshjung commented 3 years ago

So I have the following in Nuxt:

<div class="image-container">
  <client-only>
    <v-zoomer style="width: 100%; height: 100%; border: solid 1px silver;" pivot="cursor">
      <img :src="challenge.photos[0].url" style="object-fit: contain; width: 100%; height: 100%;" />
    </v-zoomer>
  </client-only>
</div>

When I use the scroll wheel, it zooms in nice and smooth, and as soon as it stops zooming... it resets to the center of the image. What is going on?

Note: it also does the same thing, resetting to center, when a drag a zoomed image.

joshjung commented 3 years ago

Note! I think I figured out what is causing it. When the width and the height of the image zoomer are exactly the same it behaves this way.

I am pretty sure this is because the getMarginDirection only allows for X and Y but not for when they are equal.

jarvisniu commented 3 years ago

The demo page is also the same width and height. Does it have the same problem?

juventus18 commented 3 years ago

I was seeing the same issue today. Don't have too much time to play around with it, but it appears to me to be a problem with % based-sizing (i.e. <v-zoomer style="width: 100%; height: 100%; ... in the example given.)