Enlarged Image Size without scaling

Shopify Discussion
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.

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