How to scale down an image without changing the aspect ratio?

Question

css

How can I reduce the width of an image by 50px, without changing the proportions, and so that everything fits into a circle (not flattened or stretched out)?
Figure 1 uses bootstrap rounding and sets the property width = 50 px

<img src="http://fxstock.ru/uploads/2013-03/1362253286_Novym-anfas-aromata-Chane.jpg" width="50px"  class="img-circle">

Figure 2 uses bootstrap rounding and sets the properties width = 50 px, height = 50 px

<img src="http://fxstock.ru/uploads/2013-03/1362253286_Novym-anfas-aromata-Chane.jpg" width="50px" height="50px"  class="img-circle">

It turns out the following algorithm:
1. We reduce the image proportionally in width to 50px
2. If the height is less than the width, then we reduce the height to 50px, respectively, the width will be greater than
3. The image is centered
All this allows you to make a background, but you need to use the img tag.
I found a similar question on the toaster, but it does not take into account the algorithm that I gave above and therefore the chopped edges.
How to properly resize images with CSS/HTML?

Answer 1

codepen.io/anon/pen/RaEoEP

Answer 2

Proportions only:
1) background through background-size: cover
2) new property object-fit
3) as well as cropping on the server

Answer 3

Here are the options, which one to use decide:
codepen.io/Profesor08/pen/grZgjX