search

francoischalifour / medium-zoom

🔎🖼 A JavaScript library for zooming images like Medium
https://medium-zoom.francoischalifour.com
MIT License
3.64k stars 165 forks source link

Is medium-zoom conflict with html style zoom? #164

Closed qrzbing closed 3 years ago

qrzbing commented 3 years ago

Bug description

When I want to use <img src="xxx" style="zoom: 80%;" class="medium-zoom-image"> will cause image in wrong location.

bug

How to reproduce

See website on https://nuaa-s3lab.github.io/dailyPaper/2021/0104.html, the second image and images after have this error. HTML language of image is: 

<img src="/dailyPaper/assets/img/3.e02d285c.png" style="zoom: 67%;" class="medium-zoom-image">

Expected behavior

See image in the center of paper

Reproducible example

Link to the bug reproduction

Environment

francoischalifour commented 3 years ago

Medium Zoom doesn't reset the style of the zoomed image because some user styling might still be expected on the zoomed image. However, you should remove the zoom style property from the zoomed image because it conflicts with the computed zoom styles.

This logic can be executed in a Medium Zoom event, manipulating the zoomed images style:

// In the event
document.querySelectorAll('.medium-zoom-image--opened').forEach(x => x.style.zoom = '');