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, the photo crops and centers itself.
object-fit: cover crops the exact same way background-size: cover does, but is used for styling imgs, videos and other media tags rather than background images.
img {
object-fit: cover;
}https://medium.com/@chrisnager/center-and-crop-images-with-a-single-line-of-css-ad140d5b4a87