If you manage a website, you know that imagery is one of the hardest parts. Keeping consistency and getting everything sized correctly is often time consuming and prone to errors.
Fortunately, there’s a new(ish) CSS technique called “object-fit” that can be a big help — especially for those of you working existing content into a redesign. Even if you’re not a developer, you’ll want to know about this tech (and even ask for it if you think you’ll benefit!).
What is object-fit?
Simply put, object-fit is a way to automatically crop images. It’s a CSS technique (called a “property”) that you can include in your website’s code to define how images are sized within the space given to them. While image-sizing CSS has existed for a long time, object-fit gives you even more control, and helps a ton with consistency.
object-fit means that, if you don’t want to, you don’t need to worry about cropping and resizing images outside of your content management system. 🤯
There are also some sibling CSS properties that allow you to have even more control over how images are positioned.
object-fit means that, if you don’t want to, you don’t need to worry about cropping and resizing images outside of your content management system.
An example of object-fit
There are many ways to configure this property, but we thought it would be helpful to see just one.
Original images
Images using object-fit
In this example, the original images were different sizes and orientations. Using object-fit, the bottom two examples are automatically cropped to the same size and orientation. Neat huh?
What object-fit can’t do
Real talk: object-fit is not the end of every frustration with images on the web. Obviously, it can’t compensate for bad image quality or inconsistent image styles across your site.
And object-fit might not be the best choice for some image subjects, or sites where the subjects vary quite a bit. This is because it may crop out areas you don’t want to remove. For these scenarios, you may still need to edit images with Photoshop.
Finally, you should know that object-fit only works with newer browsers (i.e. no Internet Explorer). That said, there are other techniques that have support for older browsers.
How to implement object-fit
If you’re a developer, check out this great guide from CSS Tricks.
If you don’t have development skills, we can help! We’re always eager to lend a helping hand. Don’t be a stranger — get in touch.