I am working on a problem where we need to show the users a preview of an image through a modal. We want them to have the maximum possible view within a modal and not create a separate page for that. So my question is, what should be the maximum modal size in % to the size of the screen?

  • The answer is depending on the device. A Modal may take 90% of the page in a regular phone (320px in width) while it only takes 40% on a desktop (for example)... so, percentage is not a good measure in this case.
    – Shahriar
    Sep 27 '21 at 11:02
  • Let's not talk about phones for now, just % in terms of desktop resolutions. Suppose you have a 1280(w)x720(h) screen, what would be the MAXIMUM size for a modal that you'd suggest? Considering I want to go for the maximum possible one Sep 27 '21 at 12:46
  • I suggest something like Wikipedia's desktop solution for viewing images larger. Quite a satisfying and non-disruptive preview. Sep 28 '21 at 2:54
  • If you are stuck to a framework that forces a modal for previewing images, you should state this in the question. The better solution however is to step away from such modal and show the images as large as they are or can be in the screen and fill the remaining space with a background that covers the page. Logically it should also have a clear close button. It's indeed like wikipedia does as mentioned by Luke.
    – jazZRo
    Sep 28 '21 at 11:34

The maximum size for displaying a photo will depend on the size of the photo itself. If it is 500px width, then that should be its maximum size.

Since you are talking about PREVIEWS of photos, then any small size will do, from 150px to 500px.

  • You didn't quite get it. Let me elaborate. You click on the thumbnail of an image/poster. Let's say, similar to Freepik or Shutterstock. You have a square boundary within which the poster would necessarily lie whether it be a square or a rectangle (portrait or landscape). Now, what should be the maximum height for the modal in ratio or % with the height of the screen? Sep 28 '21 at 5:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.