CSS Object-Fit ♥♥♥

I first heard of the object-fit attribute a couple of month ago and i make extensive use of it since this 'magic moment'. It's just so freaking helpfull for RWD that i won't miss it anymore.

The worse thing about it, like most new techniques, some major browsers do not support it. It's just the IE & Edge ... so from my personal point of view i give a shit about this browsers. But as web professionals - sadly - we have to care about those.

So i found a nice workaround which will work in all Browsers supporting the background-size property.

It's pretty simple: In JavaScript, use modernizr to detect missing object-fit support, read out the image path, set the image as background to the parent container. The rest ist just a little css.

Please see the detailed solution here: https://medium.com/@primozcigler/neat-trick-for-css-object-fit-fallback-...

Thank's alot to Primož Cigler!

Neuen Kommentar schreiben

Plain text

  • Keine HTML-Tags erlaubt.
  • Internet- und E-Mail-Adressen werden automatisch umgewandelt.
  • HTML - Zeilenumbrüche und Absätze werden automatisch erzeugt.
CAPTCHA
Diese Abfrage dient dem Schutz der Seite gegen automatisiertem Spam.