materialbox enlarges images to window size.

[johnyluyte]

In the current design, the materialbox enlarges images to "window size". For example:

• an image is 100x100 on the page.
• its original size is 600x600.
• the browser's document.window is 1920x1080.

When a user clicks on the image, it will enlarge to something close to 1920x1080 instead of 600x600. It will make the image blur in some cases.

Codepen demo: http://codepen.io/ChunNorris/pen/bpZyPd

Use naturalWidth and naturalHeight instead of window.innerWidth and window.innerHeight can fix this problem.

Please see this commit: https://github.com/johnyluyte/materialize/commit/4489d65fc7c5dab719d82b0c399b584ee3ee7cf3

After doing a quick search on the reported issues, I didn't find any issue about this behavior. So I don't know if this is actually an issue or its just a normal behavior. But its not a normal behavior in other library I used (e.g. FancyBox).

[gubi]

Please allow us to configure it by passing a parameters object

[levjad]

Would be nice if there would be a official 'fix' for this bug.

[hudsantos]

Closed issue but not sure if this is already fixed.

Anyway, this answer provides a related workaround https://stackoverflow.com/questions/51389307/lightbox-onclick-change-src-then-change-back/65556831#65556831