Object-fit cover, the new background-image

20

Today I learned about the css object-fit: cover settings. This technique allows us to use a img and display it like background-image with the background-size: cover settings. This is pretty nice, because in this case you can use an image with a srcset and use smaller/different background images on different sizes. Check it out in my pen:

See the Pen img object-fit cover is the new background-image by Marco (@marcovanzomeren) on CodePen.

About

Marco van Zomeren is a designer on a audio visual journey. Currently working full time at a company with several subsidiaries in the financial sector. Besides his day job he spends most of his spare time on producing electronic music. More...

Related

Swiper.js and Instafeed.js combined

Today I discovered at this site how to combine the Instafeed.js with the Swiper.js, so I can show the most recent Instagram post in a swiper gallery on my homepage….

Read more

My musical journey

While creating songs for a couple of years now, I came up with a format to bring some structure in this proces. It is a way to translate my journey…

Read more

Get audio url from post attachment WordPress

I am currently still working on my own website and to take it a step further, I needed to know how to display the audio which is attached to the…

Read more

Add latest Instagram pictures (feed) to your WordPress website

To show the 10 most recent pictures of my Instagram feed on my website, I was looking for a technique to this. I remembered that there is a Javascript which…

Read more

Add customize controles to WordPress theme

Currently I am working on developing my own WordPress theme. Therefore I am looking for a way to give the user the control over colors and settings. Yesterday I stumbled…

Read more

Intermezzo

Soms lukt alles, soms lukt niks. Zo is het dagelijks, gedurende het werk en tijdens het produceren van muziek. Soms wordt ik spontaan verliefd op een track en soms belandt…

Read more