Set all product image sizes the same in Dawn Theme

[kcstoybox]

Is there a way to resize all my images to the same size without cropping them?  I am using the Dawn theme.

My website is www.kcstoybox.com

Thank you!

[Moeed]

Hey @kcstoybox 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.card__inner.color-scheme-2.gradient.ratio {
    height: 250px;
}
.card__media {
    background: white !important;
}
.media.media--transparent.media--hover-effect img {
    object-fit: contain !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[tim]

Yes, you can with CSS.

Rather than fixing the image height I'd recommend fixing aspect ratio.

.card__inner:before {
  padding-bottom: 100%; /* this is the height of images relative to their width */
}

.card__inner img {
  object-fit: contain !important;
  background-color: white !important;
}

You can paste this code into Theme Settings=>Custom CSS setting or into Custom CSS setting of collection grid section(s).

Editing your theme code will make updates to your theme much more troublesome.

But I'd rather say use an app (there is a whole spectrum of auto image editing apps in the app store) and let the app to make all your images (say) square by enlarging canvas.

Depending on the number of products/images, this may take $20-$30 once but then all your images will be square and produce a nice regular grid in any theme.

[DaisyVo]

Hi @kcstoybox 

You can add this code to the custom CSS field:

.card.card--standard.card--media .card__inner {
    height: 250px !important;
}
.card.card--standard.card--media .card__inner img {
    object-fit: contain !important;
}

You can change the height in the code if you want further modification.

Hope this can help!

Best,

Daisy