Center and crop images with a single line of CSS

Using object-fit: cover

Chris Nager
Jan 20, 2015 · 1 min read

It’s simple. Set your image crop dimensions and use this line in your CSS:

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.

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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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