Cropping of photos in catalogue using dawn theme

[IronAffinity]

Hey all, really trying with this one
My theme is cropping my photos of products to a square - making them just look cut off

Is there any way to fit the image to the product, or something?
see attached - 

[TheBigLincoln]

Edit the height o your products photos in the products display section.
Recom: desktop - 500
             mobile - 250

Did you get it resolved?

[DaisyVo]

Hi @IronAffinity , can you share store url? 

[IronAffinity]

https://ironaffinity.com.au/collections/hoodies-w

This is the particular collection im refering to right now - currently editing the other model photos for the other collections..

[DaisyVo]

Hi @IronAffinity 

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file

img.motion-reduce {
    object-fit: contain !important;
}

Result 

Best,

DaisyVo

[IronAffinity]

is there a way to do this and maintain the soft curved edges/corners?

[Dan-From-Ryviu]

Hi @IronAffinity 

The Dawn theme has an option to change images in the product card to portrait. You can see it from store admin > Sales channels > Online store > Themes > Customize > click Homepage dropdown > Collections > open collection template > product grid > Image ratio 

[tim · Accepted solution]

@Dan-From-Ryviu solution is proper. You should try either "Portrait" or even better -- "Adapt".

Also -- avoid editing theme code -- this will make your theme updates problematic.

If Dan's solution does not work for you, you can instead add the following code to the section's "Custom CSS" setting or "Theme Settings"=> "Custom CSS":

.card--media, .card--media> * {
  --ratio-percent: 150% !important;
}

And replace 150 with whatever better fits your images.

[IronAffinity]

Yessss this is exactly what i wanted!! thank you so much