RIP ✝ CSS Background Images or — Fitting Elements with CSS property – object-fit

Here’s a list of my best web development tutorials.

Complete CSS flex tutorial on Hashnode.

Ultimate CSS grid tutorial on Hashnode.

Higher-order functions .map, .filter & .reduce on Hashnode.

Follow me @ Twitter, Instagram & fb to never miss premium articles.

The object-fit property was suggested to me by Clément Ducerf by commenting on my HTML backgrounds article. Instead of drawing a comparison to backgrounds I decided to write a new tutorial from scratch.

The best way to explain object-fit would be to show this diagram:

Image for post
Image for post
Along came object-fit property to automate this process… in the past, you had to write your own JavaScript code, or hack it out with CSS variables. Now this is no longer required. Simply apply one of these values: fill, cover, contain or none to your object-fit property on a blocking element… and presto!

Maybe it’s just me – after all like many I started coding HTML in a previous century. But even I have not heard of object-fit before. Have I been busy with other projects while CSS has been forcefully evolving to a brighter future?

Goodbye CSS background-size Property

As browser support is almost 100% complete the object-fit property is starting to become de facto of aligning inner elements within a parent box. This property is not limited to background images — any blocking content is welcome! This includes videos.

background-size while still good for simple stretches — from the 90’s era — is just too limited for modern day web development.

It makes sense because lets face it. Every time you tried to arrange those thumbnails images after an profile picture has finished uploading you had to write custom JavaScript or CSS code that juggles arbitrary width and height values to create a percentage ratio.

No combination of background-size values can ever help you here.

This really saves a lot of custom coding trouble. And as they say the best programmers are the lazy ones. Sometimes this is true.

Congratulations.

You now have a handful of ideas about using object-fit.

You can follow me on GitHub — I follow back!

This article was sponsored by Learning Curve software literature publisher.

Written by

Issues. Every webdev has them. Published author of CSS Visual Dictionary https://amzn.to/2JMWQP3 few others…

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