# Display images in a consistent size

Source: https://support.storeconnect.com/articles/how-to-make-product-images-render-the-same-size · Last modified 21 August 2026

Every store contains completely different product image sizes making it hard to keep consistency across all stores.

Our product card templates and product images on the product page are considered standard aspect ratios. We handle oversizes using liquid filters to render the different images or media sizes but it doesn’t affect the uneven distribution of sizes between product cards and product page images.

The proportional relationship between height and width, in other words, aspect ratio, is key when uploading media and handling the situation mentioned above.

There aren’t specific standards on how wide or high an image should be as this can vary from store to store but here are the recommended aspect ratios:

-   1:1 width and height are the same

-   2:3 portrait-style image, the height is 1.5 times longer than the width


## Set the image size with CSS

1.  Go to the Custom Styles in the store record or create a new style block

2.  Paste the following CSS rules:

    ```css

    .SC-ProductCard_image {
    height: 100%;
    }

    .SC-ProductCard_image img,
    .SC-ProductCard_image svg {
    object-fit: contain;
    height: 100%;
    aspect-ratio: 3/2;
    }
    ```

3.  Click save


You can also set the object-fit to cover size:

`object-fit: cover;`

Your changes and customisations will be reflected in the product cards, these cards are used in the following templates:

-   Category page template

-   Category and product index page templates

-   Featured products


The object-fit property helps to avoid expanding or cropping the images, it will fit the image within the image box.

## Related articles

-   [Adding custom CSS](adding-custom-css)

-   [Upload images, media, and other files](uploading-media)

-   [How to insert media using Liquid](liquid-how-to-insert-media)

---

## Follow StoreConnect

- [Email Newsletter](https://getstoreconnect.com/c/lp-newsletter)
- [LinkedIn Newsletter](https://www.linkedin.com/build-relation/newsletter-follow?entityUrn=7444956928444862464)
- [YouTube](https://www.youtube.com/channel/UCngKdP2x8l1wcbAKW3tvU8g)
- [LinkedIn](https://www.linkedin.com/company/storeconnect)
- [X / Twitter](https://x.com/storeconnecthq)

## Popular Links

- [Partners](https://getstoreconnect.com/partners)
- [News](https://getstoreconnect.com/articles/news)
- [Events](https://getstoreconnect.com/articles/events)
- [Feature Comparison](https://getstoreconnect.com/how-we-compare)
- [Download a free trial](https://appexchange.salesforce.com/appxListingDetail?listingId=a0N3A00000FMkeKUAT)
- [Book a Demo](https://getstoreconnect.com/contact)

## Documentation

- [Help documentation](https://support.storeconnect.com/help-documentation)
- [AI agents](https://support.storeconnect.com/ai)
- [Videos & tutorials](https://support.storeconnect.com/videos-tutorials)
- [Developer reference](https://support.storeconnect.com/developer-reference)
- [Release notes](https://support.storeconnect.com/release-notes)
- [Troubleshooting](https://support.storeconnect.com/troubleshooting)
- [Trust Center](https://trust.getstoreconnect.com/)
- [Status Page](https://status.storeconnect.com/)

## Contact

- info@getstoreconnect.com
- US +1 415 745 3230
- AUS +61 2 8365 2308

100 S Ashley Dr, Suite 600-2461
Tampa FL 33602-600 USA

Level 22, Sydney Place
180 George Street
Sydney, NSW, 2000, AUS

---

StoreConnect Support — https://support.storeconnect.com/articles/how-to-make-product-images-render-the-same-size