How to make the image show normal after click it on mobile view?

Topic summary

A user is experiencing an issue with product image display on mobile devices. When clicked, images appear at their original size—too large for mobile screens—instead of adjusting to fit the viewport.

Desired behavior:

  • Maintain zoom effect on product images
  • When users click an image, display only that single image (not all product images together)
  • Image should scale appropriately to mobile screen size
  • Require users to click an X icon to exit the enlarged view

Suggested solution:
One commenter recommends disabling the zoom-on-hover feature specifically for mobile devices, since touch interactions don’t support traditional hover effects.

Status: The issue remains unresolved, with the user clarifying their specific requirements for the mobile image viewing experience.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.

How to make the image show normal after click it on mobile view? it shows the original size and too large, i want it adjusted into cellphone. The first picture is the image of my product, the second one is other website. i want it to show like the second one.

May be you can disable the zoom images feature on hover for mobile devices. Since you can’t really hover on mobile it takes touch on image as hover effect.

I need the zoom effect, but once user click the product image, only can view the current one,not the rest together. More over, only click the X icon to exit, or it will take user out of the page.