Product Images Customization / Weird Crop

I am designing my product page using the Simple Layout with Carousel design. I have a mix of square, landscape or portrait images and no matter what format I selected some of them end up cropped.  Is there any way to insert code to force the full image to show, rather than a cropped version - to shift with each image rather than forcing it to fit into one format? 

Can you share link to page where you have problem? We can check easier.

On 5/10/2024 at 10:14 PM, Amikhail said:

I am designing my product page using the Simple Layout with Carousel design. I have a mix of square, landscape or portrait images and no matter what format I selected some of them end up cropped.  Is there any way to insert code to force the full image to show, rather than a cropped version - to shift with each image rather than forcing it to fit into one format? 

Did you find a solution? I am having the exact same problem. Cropped images in product carousel as well as on main shop page.

17 hours ago, WHEBRU said:

Did you find a solution? I am having the exact same problem. Cropped images in product carousel as well as on main shop page.

If you share link to shop page, we can check easier.

hey @Amikhail - this is a great question!

The container images are placed in within a product page can be pretty limiting, especially when you have images with a different aspect ratio.

There isn't a way to force the container to respond to the size of the image, but we can take this the other way and force the image to fit inside the container! 😬

This is a code that will work specifically for the simple layout; other designs use different selector classes. 

.ProductItem-gallery-slides-item-image{
  object-fit:contain!important
}

@WHEBRU - this is the same code, updated for the storefront page that shows all the products in a grid:

.products .grid-item img{
  object-fit:contain!important
}

I hope that info helps with your project!

6 hours ago, inside_the_square said:

hey @Amikhail - this is a great question!

The container images are placed in within a product page can be pretty limiting, especially when you have images with a different aspect ratio.

There isn't a way to force the container to respond to the size of the image, but we can take this the other way and force the image to fit inside the container! 😬

This is a code that will work specifically for the simple layout; other designs use different selector classes. 

.ProductItem-gallery-slides-item-image{
  object-fit:contain!important
}

@WHEBRU - this is the same code, updated for the storefront page that shows all the products in a grid:

.products .grid-item img{
  object-fit:contain!important
}

I hope that info helps with your project!

On 5/10/2024 at 10:14 PM, Amikhail said:

I am designing my product page using the Simple Layout with Carousel design. I have a mix of square, landscape or portrait images and no matter what format I selected some of them end up cropped.  Is there any way to insert code to force the full image to show, rather than a cropped version - to shift with each image rather than forcing it to fit into one format? 

Did you find a solution? I am having the exact same problem. Cropped images in product carousel as well as on main shop page.

Big thanks. Both codes above fixed the issue for me.