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

**URL:** <https://community.appfarm.io/t/fullscreen-preview-on-image-component-is-zoomed-in-not-responsive-desktop-view/2369>\
**Category:** Ask the community\
**Created:** [June 1, 2026, 8:55am UTC](https://community.appfarm.io/t/fullscreen-preview-on-image-component-is-zoomed-in-not-responsive-desktop-view/2369 "2026-06-01T08:55:37Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![JustineC](https://avatars.discourse-cdn.com/v4/letter/j/ecae2f/32.png) [@JustineC](https://community.appfarm.io/u/JustineC)\
**Post date:** [June 1, 2026, 8:55am UTC](https://community.appfarm.io/t/fullscreen-preview-on-image-component-is-zoomed-in-not-responsive-desktop-view/2369/1 "2026-06-01T08:55:37Z")

</div>

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](https://europe1.discourse-cdn.com/flex013/uploads/appfarm/original/2X/9/91c5a9607e7efca87f360ece26c77975dcf91b06.png)

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!

---

<div class="post-metadata">

**Author:** ![nina](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/nina/32/1903_2.png) [@nina](https://community.appfarm.io/u/nina)\
**Post date:** [June 12, 2026, 10:37am UTC](https://community.appfarm.io/t/fullscreen-preview-on-image-component-is-zoomed-in-not-responsive-desktop-view/2369/2 "2026-06-12T10:37:18Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![Olav](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/olav/32/63_2.png) [@Olav](https://community.appfarm.io/u/Olav)\
**Post date:** [August 13, 2026, 5:13am UTC](https://community.appfarm.io/t/fullscreen-preview-on-image-component-is-zoomed-in-not-responsive-desktop-view/2369/3 "2026-08-13T05:13:42Z")

</div>

Hi! This bug has been fixed in [version 154](https://community.appfarm.io/t/release-notes-154/2411).