How do you solve the image output problem?

Question

css

I am writing a user profile, the user uploads an image, say an image of 400px by 200px (images are planned to be of different resolutions and weights), an image of 200px wide is displayed in the profile (width - using css I set the maximum size to 200px, the height adjusts automatically and is different each time).
If you set the width and height of 200px by 200px using css (for example), then the image will be 200px by 200px, but there will be a lot of stretched, compressed. And you need a clear picture, albeit a certain area.
It is necessary that the images fit the selected area and that they do not shrink. I think you need to show a certain area of ​​​​the image (focus on a certain part of the image).
So far I don't understand how to implement it.
How do you solve this problem? maybe what gems are you using or another solution?

Answer 1

In this way, we force any image to be no smaller than our square, and to be located strictly in its center
:
bottom, etc.
And it is desirable to resize images on the backend, for performance reasons.

Answer 2

The methods are almost identical
1. an element with fixed sizes, the image is its background, and background-size: cover
2. object-fit: cover for the image with fixed sizes