Fullscreen Preview on Image Component is zoomed in / not responsive (Desktop View)

Ask the community
1

Hi everyone,

I am facing an issue with the native Fullscreen Preview option on the Image Component when running the app on a Desktop view.

When a high-resolution image is clicked, the fullscreen preview displays it in its native size, making it way too large for the computer screen. It is completely zoomed in and cropped by the browser viewport. While it is possible to zoom in even further, it is completely impossible to zoom out to see the full picture within the preview boundaries.

image
image194×106 2.5 KB

I have attached a screenshot of my current component properties. As you can see:

  • Disable Responsive Image: Unchecked (I tried checking it as well, but it didn’t change anything).

  • Fullscreen Preview: Checked.

Has anyone found a workaround for this native preview on Desktop, or is this a known bug?

Thanks for your help!

2

Hi Justine!
I have recreated this issue and registered this as a challenge. We will let you know when it is solved.

For work arounds you could try:

  • Build your own fullscreen preview with a container overlay
      1. Add a full-screen overlay Container (position: fixed, 100vw × 100vh, high z-index, dark background)
      2. Place an Image component inside it with object-fit: contain and max-width: 100% / max-height: 100%
      3. Show/hide the overlay via a boolean on the On Click event of the original image
  • Use a Dialog component: Open a Dialog on click and place the image inside it styled with contain sizing.
  • Limit the source image resolution: If you control the upload flow, use the size options or compress images on upload
  • Use a coded component to create your own fullscreen preview

Hope this helps!