How to resize the images to have the same height in group while keeping aspect ratio?

Question

Currently, take a look at list of products with images:

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:

There is CSS snippet for each img

   .ui.medium.image
   {
        width: 300px;
        height: auto;
        font-size: 1rem;
   }

If I change height: auto to height: 200px, but it ruins aspect ratio:

How to fix them properly with same height while keeping aspect ratio?

Any suggestions are welcome.

Answer 1

You can just set the width to auto, this will make them all the same height, and preserve the aspect ratio. However, they will then be different widths:

   .ui.medium.image
   {
        width: auto;
        height: 200px;
        font-size: 1rem;
   }

The best way to do this would be to use a background-image instead.
e.g.:

.ui.medium.image {
  /*Image should be a div*/
  height: 200px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

Then, you could just set the image with an inline style:

<div class="image" style="background-image:url('path/to/image.jpg');">

Answer 2

You need to center and crop the images using CSS background images.

<style>
    .image {
        background-position: center;
        width: 200px;
        height: 200px;
        float: left;
    }
</style>

<div class="image" style="background-image: url('http://lorempixel.com/400/200/sports/');"></div>
<div class="image" style="background-image: url('http://lorempixel.com/300/500/abstract/');"></div>
<div class="image" style="background-image: url('http://lorempixel.com/200/400/nature/');"></div>