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, the photo crops and centers itself.

See it in action.

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.

object-fit has fairly decent support in the latest browsers and there’s a polyfill for older browsers (IE8+).

Interested in the other object-fit values? Try them out.

--

--

Senior software developer @airhq / formerly @iex and @salesforce

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store