IE and Edge fix for object-fit: cover;

Question

I\'m using object-fit: cover; in my CSS for images on a specific page, because they need to stick on the same height. It works great in most browse

Answer 1

I just used the @misir-jafarov and is working now with :

• IE 8,9,10,11 and EDGE detection
• used in Bootrap 4
• take the height of its parent div
• cliped vertically at 20% of top and horizontally 50% (better for portraits)

here is my code :

if (document.documentMode || /Edge/.test(navigator.userAgent)) {
    jQuery('.art-img img').each(function(){
        var t = jQuery(this),
            s = 'url(' + t.attr('src') + ')',
            p = t.parent(),
            d = jQuery('
');

        p.append(d);
        d.css({
            'height'                : t.parent().css('height'),
            'background-size'       : 'cover',
            'background-repeat'     : 'no-repeat',
            'background-position'   : '50% 20%',
            'background-image'      : s
        });
        t.hide();
    });
}

Hope it helps.