How to keep the thumbnail image aspect ratio?

Shopify Discussion
1

https://0db1d3-5b.myshopify.com/products/test

The thumbnails for this product are portrait aspect ratio, Shopify renders them as squares. I was able to make it show the whole image within that square, without cropping.

How do I change the aspect ratio to make the whole area of the image portrait as well, so that it doesn’t have those white stripes on the sides and keep a 10-20px distance between the items?

LIYAShop_0-1710164228323.png
LIYAShop_0-1710164228323.png663×456 167 KB

2

Found a solution by adding this code to base.css

.thumbnail-list__item::before {
  content: "";
  display: block;
  padding-bottom: 140% !important;
}

As a bonus, I also found a way to align thumbs in the center, because in my case there will mostly be 3 items or less and left alignment just wasn’t appropriate.

.thumbnail-list {
  grid-template-columns: repeat(5, 1fr) !important;
  margin: 0px auto;
  justify-content: center;
}