Ask HN: How do you implement modal images?
I've become opinionated on this. My guidelines are:
1) Use most of the screen available, something like 90% width/height.
2) Close the image when clicking ANYWHERE on the modal. This includes the image itself.
3) No need for a close button.
This allows more viewing area and easy closing method if you know that you just have to click anywhere to go back to what you were doing.
Sites like Discord make it tough on me because they restrict the viewing area too much, they don't expand much. And this is because they expect you to click on the surrounding area to close it. If clicking the image closed it they could expand more.
4) Have a button to expand images vertically.
This is for very long images.
I show first a normal version of the image where it is completely visible, but maybe hard to read. If the user chooses so they click a button which expands the image vertically and allows the user to scroll to read the image.
I experimented with expanding vertically automatically but I found this to be not very natural, as I expected to see the "whole picture" first.