Image stretching with "aspect-ratio" property

I'm trying to make a flex container in which I want to display products, but all pictures does not have same ratio.

I used aspect ratio: 1 / 1; to make every image a square. My issue is that I would like to keep my images from stretching but could'nt manage to find how I should do it. Would appreciate some explanations

My CSS:

.product {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-basis: 22%;
}

.product img {
  aspect-ratio: 1 / 1;
  width: 100%;
  margin: 2rem;
}

Result (both left images are affected):

Solution

Style your images with object-fit: contain;. Here’s a good article which explains how it works.

.product img {
  aspect-ratio: 1 / 1;
  width: 175px;
  margin: 5px;
  border: 1px solid mediumvioletred;
  object-fit: contain;
  background: lavenderblush;
  border-radius: 10px;
}

<div class="product">
  <img src="https://media.cnn.com/api/v1/images/stellar/prod/221018084245-drew-barrymore-file-1018.jpg?c=original">
  <img src="https://akns-images.eonline.com/eol_images/Entire_Site/202196/rs_1200x1200-211006114408-1200-drew_barrymore-gj.jpg?fit=around%7C1200:1200&output-quality=90&crop=1200:1200;center,top">
  <img src="https://static.tvtropes.org/pmwiki/pub/images/drewb.png">
</div>