Enlarged Image Size without scaling

Shopify Discussion

Topic summary

A Shopify store owner is experiencing image quality issues when users click to enlarge product photos. Images at 1000x1000px are scaling to fill the browser window on large monitors, causing them to appear fuzzy when stretched beyond their native resolution.

Proposed Solutions:

  • Supporter suggests modifying section-main-product.css by changing the height property in .product-media-modal__content> from auto to 1000px

  • DaisyVo offers an alternative CSS approach using Custom CSS in Theme settings:

    • Reduces image width to 50% instead of 100%
    • Uses object-fit: contain to prevent distortion
    • Provides step-by-step implementation instructions with screenshots

Current Status:
Multiple solutions have been proposed with code snippets, but the original poster has not confirmed which approach resolved the issue. The discussion remains open regarding the most effective method to prevent image scaling beyond native resolution.

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

When a user is on the description page and clicks on an image, the image comes up full screen based on the browser size. This causes the image to become fuzzy because it is larger than the resolution. I only want the image to enlarge, so the browser displays it at 1000x1000px. How do we make that happen? Here is an example: https://carltannerdesigns.com/search?q=black+mystical+beauty&options%5Bprefix%5D=last if you click on the main image, it will scale based on the size of the browser window, try this on a large monitor, and you will see it scales in size. I don’t want it to scale because it could scale beyond the size of the photo. I have images at 1000x1000, and that is the size I want to show them at. How do we prevent the scaling from happening.

2

Yeah you can do that got to

theme editor click on edit code

search this file

section-main-product.css

Scroll to this line

.product-media-modal__content>{

there you see height which is at auto change it to

1000px

If you want i can do it for you.

3

This setting is working for you

4

Hi @mgcre8v ,

If only one image is displayed initially, it’s straightforward. However, when clicking, two images appear, and other products may have even more.

For now, I have temporarily changed the image width from 100% to 50%.

If this solution works for you, you can follow these steps to implement it:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/ypQ7nly2wv27
Step 3: Copy the code below and paste it there

Here is the code for step 3:

.product-media-modal__content > img {
    object-fit: contain !important;
    width: 50%;
}

Here is the result:

DaisyVo_0-1737503630386.png
DaisyVo_0-1737503630386.png923×574 58.7 KB

Please let me know if it works!

Best,
Daisy