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.
My Coding Books
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:
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.
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.
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.