distorted product photos

Site URL: https://www.missdemeanor.com/womens?category=j.walker

after years of easily uploading photos from my phone as product images, the photos appear stretched and distorted in the gallery view. once i click on the product, the photos appear as they should. anyone else experiencing this?

below: photo of two products in gallery view. the photo of the blouse on the left is distorted, photo on the right is normal (older photo, taken with same phone).

second photo is once i click through to the product, the image appears as it should. 

Add to Design > Custom CSS

/* Fix distorted product images */
img.ProductList-image.ProductList-image--primary.loaded {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}

Same thing has happened to me but my product photos are still shrunk and distorted looking. I put in a ticket request. Has not been resolved yet. Did you end up adding the code above? 

21 hours ago, kennedyroseinteriors said:

Same thing has happened to me but my product photos are still shrunk and distorted looking. I put in a ticket request. Has not been resolved yet. Did you end up adding the code above? 

Try it, if it doesn't work, you can share link to your site, we can check easier

my site: kennedyroseinteriors.com 

the issue is under rugs, and the two new listings at the top are the distorted ones named Jasper and Ryder.

10 hours ago, kennedyroseinteriors said:

my site: kennedyroseinteriors.com 

 

the issue is under rugs, and the two new listings at the top are the distorted ones named Jasper and Ryder.

Hi,

You mean Jasper & Ryder Hover images?

not the hover, but the actual images once you open the listing. I've been on contact with Squarespace and they haven't even begun to review my issue. As you can see, the listing images appear to be shrunk and distorted, but my images on my iphone are now.

Tuan, this worked for me, thank you so much. Now that the primary image is fixed, I noticed the hover image is distorted. Is there a fix for that?

Hi again Jessica,
 
Thanks for getting back to us and for providing the requested files.
 
My apologies about the delay in following up. As Birdie mentioned, it can take time to receive a reply on escalated tickets. This is generally because in-depth troubleshooting is required to properly assess an issue.
 
To provide some context, prior to reaching out, I did take some time to conduct some testing on a test site and I wasn't able to replicate the issue you're seeing. I'm also not seeing any known issues at this time with how product images are being displayed. This indicated that the source of the problem may stem from the images themselves, so it was necessary to review the images files directly.
 
Taking a look at the images you provided, I can see that they are not following all the formatting guidelines we require for images on our platform. Specifically, the images are using a Display P3 color profile as opposed to the sRGB color profile.
 
For reference, here's our guide about that:
 
https://support.squarespace.com/hc/en-us/articles/206542517-Formatting-your-images-for-display-on-the-web#toc-image-requirements-and-best-practices

We have found that images that differ from the guidelines may result in upload or display issues. As a test, I tried converting the color profile of your images from Display P3 to sRGB and uploading them to a test site, and the images displayed without any issues on a test store page.
 
To avoid this issue moving forward, you'll want to be sure the correct sRGB color profile is being used for your images. For images that have already been uploaded to the site, you'll want to replace any affected images with ones that have been converted to sRGB.

If you're still seeing issues with images that are formatted according to the requirements outlined in the guide above, please reach out again with the image file and we'll be glad to take a look.
 
In the meantime, I definitely understand how being able to use images with different color profiles would be useful, so I’ll go ahead and submit this as a feature request to our developers. While we can’t guarantee every request will be implemented, we really do use those requests and review them regularly to inform future decisions about our product.
 
Hope this helps Jessica, let us know if you have any questions.

Where am I adding this CSS style? Can you provide some clear steps. I haven't done anything custom with my site yet. simply using the gallery from the options when trying to add photos to my blog

I have the same issue except my gallery photos when they are within a grid gallery looked smushed. Is there code that will resolve that?

5 hours ago, ChrisPeckTattoos said:

I have the same issue except my gallery photos when they are within a grid gallery looked smushed. Is there code that will resolve that?

 

Can you share link to page in screenshot?

Also, you should remove <style> and </style>. Custom CSS can't read both text, & will make syntax error