It’s simple. Set your image crop dimensions and use this line in your CSS: img { object-fit: cover; }That’s it. No need for unsemantic, wrapping divs or any other nonsense. This technique works great for cropping awkwardly-sized avatar pictures down to squares or circles. Take this wide photo of a bear below for example. Once object-fit: cover is applied to the image and a width and height are set
![Center and crop images with a single line of CSS](https://cdn-ak-scissors.b.st-hatena.com/image/square/42a66b531bd4e0609997109e8f8619e92e87fe7d/height=288;version=1;width=512/https%3A%2F%2Fmiro.medium.com%2Fv2%2Fresize%3Afit%3A1087%2F1%2A8VER_3rEX4q4iClFzkKYbw.jpeg)