jarvisniu / vue-zoomer

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

Apply vue-zoomer with another size of image #26

Closed toanhuynh345 closed 2 years ago

toanhuynh345 commented 3 years ago

Dear sir, Your package is very awesome but I have a trouble when i would like to apply image with size(718px × 1037px). I just zoom in a point which is in the corner of my image, but then it is just zoomed near in center of image or another position that i don't want. This one is not happen if i set width and height (500px x 500px) like your documents. To be honest, i hope that lib supports for many sizes and we can transfer props (width x height) in component. If you don't mind, plz show me how to set ratio or some variables in detail to get target image (718px × 1037px). I highly appreciate that. Sincerely,

jarvisniu commented 3 years ago

If you use <v-zoomer> you should apply the size styles(width/height) to the component, not <img>. The <img> size must be 100% and can not be changed.

So if you want the image size to be 718px × 1037px, you should write:

<v-zoomer style="width: 718px; height: 1037px">
  <img src="./my-image.jpg" style="object-fit: contain; width: 100%; height: 100%;">
</v-zoomer>