Center and crop images with a single line of CSS

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

[t32k]

#css object-fit: cover crops the exact same way background-size: cover does