How can I disable product image cropping?

For those working on a 7.0 template in the Brine family this Custom CSS might get you going:

// product index
.ProductList-image,
// product quick view
.ProductItem-gallery-slides-item-image 
{
  height: 100% !important;
  left: 0 !important;
  object-fit: contain;
  object-position: center center;
  top: 0 !important;
  width: 100% !important;
}

It should make the image take up as much space as possible within your chosen product index image size, without cropping the image at all.

It also works on the Quick View, if you have that enabled.

Note that you can adjust the "object-position" to dictate how the not-cropped image aligns in the "box" created by the Styles setting for product index page images.

On 8/17/2021 at 12:56 PM, kirkroberts said:

For those working on a 7.0 template in the Brine family this Custom CSS might get you going:

// product index
.ProductList-image,
// product quick view
.ProductItem-gallery-slides-item-image 
{
  height: 100% !important;
  left: 0 !important;
  object-fit: contain;
  object-position: center center;
  top: 0 !important;
  width: 100% !important;
}

It should make the image take up as much space as possible within your chosen product index image size, without cropping the image at all.

It also works on the Quick View, if you have that enabled.

Note that you can adjust the "object-position" to dictate how the not-cropped image aligns in the "box" created by the Styles setting for product index page images.

What if I wanted to do the same thing to summary block images from a store? So essentially the product images? 

On 10/31/2021 at 11:46 PM, jschultz300 said:

What if I wanted to do the same thing to summary block images from a store? So essentially the product images? 

Can you share link to page where you added summary block?

https://jamesonschultz.studio/print-gallery

On 11/2/2021 at 1:28 AM, tuanphan said:

Can you share link to page where you added summary block?

Thanks!

On 11/14/2021 at 9:34 AM, jschultz300 said:

https://jamesonschultz.studio/print-gallery

Thanks!

Try this CSS code

body#collection-617038bb2957711138d2e38c .summary-item img {
    height: auto !important;
    left: 0 !important;
    object-fit: contain;
    object-position: center center;
    top: 0 !important;
    width: 100% !important;
}

Unfortunately it didn't work, it just cropped to the top (the middle one). Note the image to the far right has had the work around applied where I make the the portrait image into a landscape by adding on transparent borders to the image, but takes a bit of time, would obviously rather automate it. Thanks for trying, if you think of anything else I'll try it out and report back.

Hello, I have this issue aswell. I'm using 7.1, you can see the issue most obviously in the sofas page on our site, where the images are landscape: https://www.jarrettfurniture.com/sofas-benches

Does anyone have some code which may help with this please? 

@jfurniture it looks like for 7.1 you just need a different selector to use the CSS I posted above.

Try this:

.grid-item-image, // both images
.grid-image-cover, // start image?
.grid-image-hover // hover image?
{
  height: 100% !important;
  left: 0 !important;
  object-fit: contain;
  object-position: center center;
  top: 0 !important;
  width: 100% !important;
}

The Grace Sofa has a nice effect with the pillows appearing/disappearing 🙂

Thank you @kirkroberts for your workaround for 7.0 on product pages.  Your solution is the closest I could find to get both horizontal and vertical images looking decent.  Any ideas for making the vertical images appear taller and more true to their original size?  Thank you.

On 12/3/2023 at 6:17 AM, alfredomoraphoto said:

Thank you  for your workaround for 7.0 on product pages.  Your solution is the closest I could find to get both horizontal and vertical images looking decent.  Any ideas for making the vertical images appear taller and more true to their original size?  Thank you.

If you share link to this page, we can check easier

Thank you Tuan.  Hope this works:

https://alfredomora.net/print-store

password: colorado

On 12/2/2023 at 6:17 PM, alfredomoraphoto said:

Thank you @kirkroberts for your workaround for 7.0 on product pages.  Your solution is the closest I could find to get both horizontal and vertical images looking decent.  Any ideas for making the vertical images appear taller and more true to their original size?  Thank you.

@alfredomoraphoto The images are shown in a "window" that has certain proportions. With cropping off the images "fit" into that window. If you have a mix of horizontal and vertical images you may want to make the "window" be a square (1:1).  The main issue with using the square is if you have any square images they will look HUGE compared to the horizontal and vertical ones. Or it may be that another proportion generally fits your images better. 

On 5/16/2021 at 12:59 PM, johan-media said:

.grid-image-wrapper img {
    width: auto !important;
    height: 100% !important;
    top: 0 !important;
}

@johan-media This bit of CSS did the trick on my client's store, but now the product titles and prices are no longer centered under the thumbnail images in the online store page. Do you or @tuanphan find a solution to this?

Website: www.reneebroxson.com

44 minutes ago, cmsolo said:

@johan-media This bit of CSS did the trick on my client's store, but now the product titles and prices are no longer centered under the thumbnail images in the online store page. Do you or @tuanphan find a solution to this?

Website: www.reneebroxson.com

Try making the image 100% width (not auto) and use object-fit: contain. Basically you're making the img "canvas" fill the space and then the image itself is contained proportionally within the canvas. Good luck!

Thank you, @kirkroberts! That did it. Here is the full CSS I used with your suggestion:

// Disable Product Thumbnail Cropping in Store //
.grid-image-wrapper img {
    width: 100% !important;
    height: 100% !important;
  object-fit: contain !important;
    top: 0 !important;
}