Is it possible to resize all product images to the same size using code?

Store Design

Topic summary

A user seeks to resize product images on their shop page to uniform dimensions using CSS code rather than manually editing each image in Photoshop.

Initial Solution Attempted:

  • Adding CSS targeting #ProductGridContainer .card-wrapper .card with aspect-ratio: 100% !important to the base.css file
  • This approach did not resolve the inconsistent image sizing

Iterative Troubleshooting:

  • Updated CSS code provided, still targeting the same elements with aspect-ratio properties
  • User reports continued issues with images displaying at different sizes
  • Additional CSS snippet introduced using object-fit: contain !important on card media images

Current Status:

  • The discussion remains ongoing without confirmed resolution
  • Screenshots were shared showing the sizing inconsistencies and desired uniform appearance
  • Another user inquires whether the same CSS solution would work for the Craft theme on collection pages, suggesting broader applicability of this issue
Summarized with AI on November 23. AI used: claude-sonnet-4-5-20250929.
1

Hi im just wondering is it possible to resize all of the images of my products on the shop page using some code before I go at it using photoshop. Much appreciated

My website is rapro.ie and ill attach an image to show what

Screenshot 2022-05-25 102611.png
Screenshot 2022-05-25 102611.png867×617 80.4 KB

I mean

2

Hello @Sebas1221

Go to your code editor ‘Assets > base.css’ and paste the below code at the bottom of the file.

#ProductGridContainer .card-wrapper .card.card--standard.card--media .card__inner {
    --ratio-percent: 100% !important;
}

Savior_0-1653473840927.png
Savior_0-1653473840927.png1278×849 110 KB

3

unfortunately I did this and it did not work i have updated it on my website if you look now you will see they are still all different sizes

4

Screenshot 2022-05-25 112638.png
Screenshot 2022-05-25 112638.png1036×884 217 KB

5

@Sebas1221

Please try the updated code

#ProductGridContainer .card-wrapper .card.card--standard.card--media .card__inner {
    --ratio-percent: 100% !important;
}
6

Not sure what problem is I would like it to be like the first bottles

dd.png
dd.png727×699 147 KB

7

@Sebas1221

Add this too

#ProductGridContainer .card-wrapper .card.card--standard.card--media .card__inner .card__media .media img {
object-fit: contain !important;
}
8

Would this code also work for the Craft theme to make all images the same size on the collection pages?