title: How to resize the images to have the same height in group while keeping aspect ratio?
body: <p>Currently, take a look at list of products with images:</p>
  
  <p><a href="https://i.stack.imgur.com/JBbg6.png" rel="noreferrer"><img src="https://i.stack.imgur.com/JBbg6.png" alt="enter image description here"></a></p>
  
  <p>Notice these pics are different sizes like different width and different height, I don't want it look bad, I'm looking a solution how to resize them properly without bothering aspect ratio. Excepted result would be like that:</p>
  
  <p><a href="https://i.stack.imgur.com/GKZOu.png" rel="noreferrer"><img src="https://i.stack.imgur.com/GKZOu.png" alt="enter image description here"></a></p>
  
  <p>There is CSS snippet for each img</p>
  
  <pre><code>   .ui.medium.image
     {
          width: 300px;
          height: auto;
          font-size: 1rem;
     }
  </code></pre>
  
  <p>If I change height: auto to height: 200px, but it ruins aspect ratio:</p>
  
  <p><a href="https://i.stack.imgur.com/TCObF.png" rel="noreferrer"><img src="https://i.stack.imgur.com/TCObF.png" alt="enter image description here"></a></p>
  
  <p>How to fix them properly with same height while keeping aspect ratio?</p>
  
  <p>Any suggestions are welcome.</p>