How do I stop Squarespace cropping some of my product images?

Hi everyone, I was wondering if anyone has come up with a solution to stop Squarespace from cropping certain product images on your online store.

I have a website on version 7.0 (Pedro template). The website sells lots of different products including art of different sizes. At the moment all the product images are being cropped to 4:3, which is fine for most products but not for the art .

It is cropping on both the overview page (https://ammolitecanada.ca/shop?category=Art) and each individual product detail page (e.g. https://ammolitecanada.ca/shop/ammolite-affinity). Could anyone suggest some custom CSS that might fix this problem? Thanks! 

@Sophie2020 Here's a code snippet to fix the cropping issues on product details page. Add the code under Website > Utilities > Website Tools > Custom CSS

.ProductItem-gallery-slides-item-image {
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    object-fit: contain !important;
    object-position: left !important;
}

On overview page, some of the images are vertically large and some are horizontally large. We can display the images without cropping. However, original sizes of the images will completely change the layout of the product columns.

Here's a code snippet you can try. Add the code under Website > Utilities > Website Tools > Custom CSS

@media only screen and (min-width: 768px) {
	.sqs-product-quick-view-button-wrapper {
		position: relative !important;
		height: 45px !important;
		align-items: flex-start !important;
		justify-content: flex-start !important;
	}
	.ProductList-outerImageWrapper {
		margin-top: -45px !important;
	}
}
.ProductList-image {
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: left !important;
}

Let me know how it goes. Thanks! 

@Lesum Thank you so much for your help! I have added the code to my site and it is now working how I want on mobile. However, it doesn't seem to be making a difference to the layout on desktop. Do you know why this might be? Thank you again, I really appreciate it! 

@Sophie2020 Try this code for desktop

/* Shop page images */
.ProductList-item img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}

On 9/4/2023 at 3:32 AM, tuanphan said:

@Sophie2020 Try this code for desktop

/* Shop page images */
.ProductList-item img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}

 

This didn't work for the image inside the product details when you click on it. I do not understand why this is still any issue by Squarespace. When selling art and photography, you can't simply just cut off part of the image and have no way for the potential buyers to see the whole piece. Ugh!

On 3/21/2024 at 4:51 AM, StephieMae said:

This didn't work for the image inside the product details when you click on it. I do not understand why this is still any issue by Squarespace. When selling art and photography, you can't simply just cut off part of the image and have no way for the potential buyers to see the whole piece. Ugh!

This code for Shop Page. You can share link to a detail product, we can help easier