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 browsers.

But when scaling my browser in IE or Edge, the image is resizing in width (not height) instead of zooming. The image gets out of shape.

What CSS rule can I use to fix this?

Here is the page

Answer 1

I had similar issue. I resolved it with just CSS.

Basically Object-fit: cover was not working in IE and it was taking 100% width and 100% height and aspect ratio was distorted. In other words image zooming effect wasn't there which I was seeing in chrome.

I took the below approach and it worked for me. May be anyone with the same issue can give it a try.

I position the image inside the container as absolute and then position it right at the centre using the combination:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Once it is in the centre, I give to the image,

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

This makes the image get the effect of Object-fit:cover. Below is the example:

// This is the div containing image
.card-b123 .image-wrapper {
    height: calc(100% - 4.5em);   // Your image container element dimensions 
    width: 100%;                  
}

// My image inside the above div wrapper
.card-b123 .image-wrapper img {
    top: 50%;
    left: 50%;
    position: relative;
    transform: translate(-50%, -50%);
}

Now, in my case I had two tiles, one was horizontal (1x2) and one was vertical (2x1), in both of them I wanted the look of object-fit:cover.

For vertical tile block, I added :

.card-b123 .image-wrapper img.vertical {
    height: 100%;
    width: auto;
}

Before (Original Image): Original Image, After : Vertical Tile block

For horizontal tile block, I added :

.card-b123 .image-wrapper img.horizontal {
    height: auto;
    width: 100%;
} 

Before (Original Image): Original Image, After : Horizontal Tile block

This worked for me perfectly fine in all browsers :)

Answer 2

There is no rule to achieve that using CSS only, besides the object-fit (that you are currently using), which has partial support in EDGE¹ so if you want to use this in IE, you have to use a object-fit polyfill in case you want to use just the element img, otherwise you have to do some workarounds.

You can see the the object-fit support here

UPDATE(2018)

1 - EDGE has now partial support for object-fit since version 16, and by partial, it means only works in img element (future version 18 still has only partial support)

Answer 3

You can use this js code. Just change .post-thumb img with your img.

$('.post-thumb img').each(function(){           // Note: {.post-thumb img} is css selector of the image tag
    var t = $(this),
        s = 'url(' + t.attr('src') + ')',
        p = t.parent(),
        d = $('<div></div>');
    t.hide();
    p.append(d);
    d.css({
        'height'                : 260,          // Note: You can change it for your needs
        'background-size'       : 'cover',
        'background-repeat'     : 'no-repeat',
        'background-position'   : 'center',
        'background-image'      : s
    });
});

Answer 4

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('<div></div>');

        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.

Answer 5

.row-fluid {
  display: table;
}

.row-fluid .span6 {
  display: table-cell;
  vertical-align: top;
}

.vc_single_image-wrapper {
  position: relative;
}

.vc_single_image-wrapper .image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

<div class="vc_single_image-wrapper   vc_box_border_grey">
  <div class="image-wrapper" style="background-image: url(http://i0.wp.com/www.homedecor.nl/wp-content/uploads/2016/03/Gordijnen-Home-Decor-2.jpg?fit=952%2C480;"></div>
</div>

try this, it should work. also remove float from .row-fluid .span6