Help to don't crop product images

Hi, with my website I present artworks, so they really shouldn't be cropped.

Could you help me to avoid cropping images in the store ?

Within the store, this concern both the "product image carrousel" (I'm not shure of the name) and the product detail page.

And both website and mobile views, of course.

(I'm using 7.1)

This would be very helpfull (and may concern a lot of people in the art industry, I guess)

Thanks a lot !

mb

PS : Here is the link : https://keyboard-pike-w25d.squarespace.com/dessins-boutique

🙂

Hi 

Are the images you currently have on your website cropped? I had a Quick Look at the URL and they don't look cropped, but I obviously don't know what the original is like!

Can you give a bit more detail?

Yes. It is fine to me, no crop. Can you take an image where you have problem?

Hi, thanks a lot for your help.

Yes, imagers are cropped on this page (both desktop and mobile view) : https://keyboard-pike-w25d.squarespace.com/dessins-boutique

And they are cropped on this page (mobile view only !) : https://keyboard-pike-w25d.squarespace.com/dessins-boutique/p/cacoqphonie-4-2017

By the way, it is very strange that the images are not cropped on the desktop view on this page. This is cool, because I don't want them to be cropped, but I can't figure out why they are not.

(for info, I tryed to add personnalized CSS, for the images not to be cropped, and then removed it. But it looks as if the personnalized CSS is still there despite the fact it is not).

Thanks a lot !

PS : attached is the image not cropped

Try this code to Website Tools (under Not Linked) > Custom CSS

div.grid-item img, img.ProductItem-gallery-slides-item-image {
    object-fit: contain !important;
}

Thanks a lot for this. It's almost great. But there is an issue then :

In the gallery of the shop, when you put your mouse over an image, there is a "see more" button that is displayed : https://keyboard-pike-w25d.squarespace.com/dessins-boutique

You can click on the button or out of the button (I guess this is not possible when the images are not cropped)

- If you click on the button : it open a page where the image is still cropped (and often the image is not displayed, refreshing the page is necessary)

- If you click out the button : it open a page that is fine (except that all the content is very down on the screen, as if there would be a large margin)

Would you have a solution to avoid this ? (maybe not displaying this "see more" button would be the best)

Thanks a lot !

Try this code under

div.sqs-modal-lightbox img.ProductItem-gallery-slides-item-image {
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
}