{"title":"Display images in a consistent size","slug":"how-to-make-product-images-render-the-same-size","url":"https://support.storeconnect.com/articles/how-to-make-product-images-render-the-same-size","url_markdown":"https://support.storeconnect.com/articles/how-to-make-product-images-render-the-same-size.md","subtitle":null,"summary":"Force uniform product card image sizes using CSS aspect-ratio and object-fit rules. Use consistent 1:1 or 2:3 aspect ratios when uploading product images to avoid stretching or cropping.","type":"Help_Documentation","video_url":"","keywords":"product images, image sizing, consistent image size, aspect ratio, css customization, object-fit, product card, uniform images, image display, custom styles, image cropping, image scaling","last_modified":"2026-08-21T07:12:35+0000","body_markdown":"Every store contains completely different product image sizes making it hard to keep consistency across all stores.\n\nOur 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.\n\nThe proportional relationship between height and width, in other words, aspect ratio, is key when uploading media and handling the situation mentioned above.\n\nThere 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:\n\n-   1:1 width and height are the same\n\n-   2:3 portrait-style image, the height is 1.5 times longer than the width\n\n\n## Set the image size with CSS\n\n1.  Go to the Custom Styles in the store record or create a new style block\n\n2.  Paste the following CSS rules:\n\n    ```css\n\n    .SC-ProductCard_image {\n    height: 100%;\n    }\n\n    .SC-ProductCard_image img,\n    .SC-ProductCard_image svg {\n    object-fit: contain;\n    height: 100%;\n    aspect-ratio: 3/2;\n    }\n    ```\n\n3.  Click save\n\n\nYou can also set the object-fit to cover size:\n\n`object-fit: cover;`\n\nYour changes and customisations will be reflected in the product cards, these cards are used in the following templates:\n\n-   Category page template\n\n-   Category and product index page templates\n\n-   Featured products\n\n\nThe object-fit property helps to avoid expanding or cropping the images, it will fit the image within the image box.\n\n## Related articles\n\n-   [Adding custom CSS](adding-custom-css)\n\n-   [Upload images, media, and other files](uploading-media)\n\n-   [How to insert media using Liquid](liquid-how-to-insert-media)"}