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 IE & Edge and personaly i wouldn’t give a shit about them, but as web professionals – sadly – we still 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-on-edge-and-other-browsers-afbc53bbb2c3

Thank’s alot to Primož Cigler!

    Schreibe einen Kommentar

    Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

    Der Zeitraum für die reCAPTCHA-Überprüfung ist abgelaufen. Bitte laden Sie die Seite neu.