francoischalifour / medium-zoom

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

Configuration option to keep the zoomed image from growing to larger than its largest size #216

Open gingersoulrecords opened 1 month ago

gingersoulrecords commented 1 month ago

The problem

When I apply medium-zoom to all images in my (blogging) application, some images are smaller than the viewport at their largest size, but get zoomed to fit the viewport, which causes them to be blurred.

Solution

I would like a config option to 'cap' the image scale to the native width/height of the image (per its width/height attributes), keeping it vertically and horizontally centered above the overlay. If it's larger than the viewport, fill the viewport, but don't zoom it past its 'largest' size.

Implementation

Include the image’s width/height attributes in the scale math so that it scales up to its largest native size if it's smaller than the current viewport.

gingersoulrecords commented 1 month ago

Reference: the 'small image' example here: https://photoswipe.com/adjusting-zoom-level/#image-is-smaller-than-initial-and-secondary