Why are my images cropped on Collection Page - Reformation theme

[GeminiAtelier]

Hi,

I changed the image ratio to Portrait in the theme customization (it was "fit to image" previously but I did not like the style) but images are now being cropped and I cannot find a way to have the image fit into this Portrait format.

Can anybody help? The website is www.geminiatelier.com and the theme is Reformation.

Thank you!

[AK_Design_Dev]

add this css on base.css

.product-card .product-feature-image-linking {
    object-fit: contain;
}

[GeminiAtelier]

Hi,

It is style the same, all images are cropped.

[AK_Design_Dev]

you need this type i think 

[GeminiAtelier]

The images are rectangular so they should fit into a portrait format. It works on he product page but not the collection page.

[BSSCommerce-B2B]

Hi @GeminiAtelier , 

I have reviewed your requirement, you just need to edit css script and the issue will be resolved.  You can follow my instructions! 

Step 1: Go to Admin -> Online store -> Theme > Edit code:

Step 2: Search for the file app.css or product-grid.css. And add this code snippet to the end of the file.

.product-card .product-featured-image-link img {
    object-fit: scale-down !important;
}

Step 3: Save your code and reload this page.

=>> The result: 

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir! 

[GeminiAtelier]

It made all the images squared, I would like them to be Portait.

[GeminiAtelier]

Could it be because I used an app called "Pixc: Photo Resize"? Should i revert back all the images to orginal for this to work?