{"title":"Aspect ratios","slug":"aspect-ratios","url":"https://support.storeconnect.com/articles/aspect-ratios","url_markdown":"https://support.storeconnect.com/articles/aspect-ratios.md","subtitle":null,"summary":"Keep product and category images uniform by using consistent aspect ratios, and fix misaligned cards with CSS aspect-ratio and object-fit properties.","type":"Help_Documentation","video_url":"","keywords":"aspect ratios, product images, image sizing, category images, css aspect-ratio, object-fit, product cards, category cards, image consistency, uniform images, image dimensions, portrait landscape square","last_modified":"2026-08-21T07:12:35+0000","body_markdown":"A store could contain a mix of completely different product image sizes making it hard to keep consistency across all pages or content blocks.\n\n:::note\nThe aspect ratio is related to, but different to the image size, to resize an image (in terms of how many bytes it takes to download) see our article on how to insert the image via liquid and the section on Rendering Images in Various Sizes.\n:::\n\nOur templates handle oversized images using liquid filters to render the different sizes but they don’t handle multiple aspect ratios on the same page.\n\nThe proportional relationship between height and width, in other words, aspect ratio, is key when uploading media and handling the situation mentioned above. It is commonly expressed as two numbers separated by a colon, as in 3:2.\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-   2:3 portrait-style image, the height is 1.5 times longer than the width\n    ![Apple Aspect Ratio](https://res.cloudinary.com/hzkr6fi81/image/upload/v1781677631/documentation-media/basic-configuration/apple-aspect-ratio.png)\n\nUsing a consistent aspect ratio for all the images of a particular type makes them display better side by side, because they all display as the same size. For example, if you want your product images to display as the same size within a collection, then they need to have the same aspect ratio.\n\nWe strongly recommend you keep the ratio consistent so your store pages display uniformly.\n\n## How to fix the aspect ratio using CSS\n\nSometimes, is not possible to upload all images with the same aspect ratios or same height and width. Product cards and category cards are most likely to be affected if you upload images with different aspect ratios. To prevent misalignment of headlines, descriptions and images you will need to implement the following CSS:\n\n**For product cards:**\n\n```\n  .SC-ProductCard_image {\n    aspect-ratio: 1/1;\n  }\n```\n\n**For category cards:**\n\n```\n  .SC-ImageLink {\n    aspect-ratio: 1/1;\n  }\n```\n\n`aspect-ratio: 1/1` will create a perfect square. You can change the numbers and play around with them. It’s important to consider that it won’t expand the image; it will just fix the proper distribution of elements with the product or category cards.\n\nLearn more in this [aspect-ratio doc](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) by MDN.\n\n### Using the object-fit property\n\nThe object-fit property helps to avoid expanding the images, it will fit the image within the image box.\n\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\nOr using cover size to crop the image within the image box:\n\n```\n.SC-ProductCard_image img,\n.SC-ProductCard_image svg {\n  object-fit: cover;\n  height: 100%;\n  aspect-ratio: 3/2;\n}\n```\n\n### Additional notes\n\nTo calculate whether images have the same aspect ratio, divide the image’s width by its height, and then compare the results.\n\nFor example, an image that is 3000 px by 1500 px has an aspect ratio of 2:1 (3000 divided by 1500 equals 2) and an image of 1600 px by 800 px has the same aspect ratio of 2:1 (1600 divided by 800 equals 2)."}