Aspect Ratios

The aspect ratio of an image is the ratio¹ of its width to its height.

It is commonly expressed as two numbers separated by a colon, as in 3:2.

For example, an image that is 400 px² wide by 200 px high has an aspect ratio of 2:1 (400 divided by 200 equals 2). An image that is 450 px wide by 150 px high has an aspect ratio of 3:1 (450 divided by 150 equals 3).

Images can be different sizes and have the same aspect ratio.

To calculate whether images have the same aspect ratio, divide the image’s width by its height, and then compare the results.

For 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).

Using 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.

StoreConnect recommends an image aspect-ratio of 1:1 or 3:2. However, any aspect ratio may be used.

We strongly recommend you keep the ratio consistent so your store pages display uniformly.

How to fix the aspect ratio using CSS

Sometimes, 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:

For product cards:

  .SC-ProductCard_image {
    aspect-ratio: 1/1;
  }

For category cards:

  .SC-ImageLink {
    aspect-ratio: 1/1;
  }

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.

Learn more in this aspect-ratio doc by MDN.