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

A nice solution over here that preserves the SEO benefits of using an img and some JS to handle the background ver for IE/edge browsers. https://medium.com/@primozcigler/neat-trick-for-css-object-fit-fallback-on-edge-and-other-browsers-afbc53bbb2c3#.6smxr75ca — Nickfmc, Feb 07 '17 at 18:50
Faced the same problem recently. This lightweight polyfill had done the job like a charm :) https://github.com/bfred-it/object-fit-images — Sergiy Zaharchenko, Apr 27 '19 at 18:33

Furqan Rahamath · Answer 1 · 2019-11-27T13:14:42.810

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.

The approach I took was to position the image inside the container with absolute and then place 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.

Here is a demonstration of the above logic.

https://jsfiddle.net/furqan_694/s3xLe1gp/

This logic works in all browsers.

I like this approach, but its necessary to use javascript to detect the container's proportion when the container's size changes. — Ricardo Ferreira, Jul 24 '19 at 12:49
@RicardoFerreira True. This answer can be extended to work with a dynamic container. — Furqan Rahamath, Jul 24 '19 at 19:35

dippas · Answer 2 · 2020-11-01T23:57:40.357

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(2019)

You can use a simple JS snippet to detect if the object-fit is supported and then replace the img for a svg

//ES6 version
if ('objectFit' in document.documentElement.style === false) {
    document.addEventListener('DOMContentLoaded', () => {
        document.querySelectorAll('img[data-object-fit]').forEach(image => {
            (image.runtimeStyle || image.style).background = `url("${image.src}") no-repeat 50%/${image.currentStyle ? image.currentStyle['object-fit'] : image.getAttribute('data-object-fit')}`
            image.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${image.width}' height='${image.height}'%3E%3C/svg%3E`
        })
    })
}

//ES5 version transpiled from code above with BabelJS
if ('objectFit' in document.documentElement.style === false) {
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('img[data-object-fit]').forEach(function(image) {
            (image.runtimeStyle || image.style).background = "url(\"".concat(image.src, "\") no-repeat 50%/").concat(image.currentStyle ? image.currentStyle['object-fit'] : image.getAttribute('data-object-fit'));
            image.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='".concat(image.width, "' height='").concat(image.height, "'%3E%3C/svg%3E");
        });
    });
}

img {
  display: inline-flex;
  width: 175px;
  height: 175px;
  margin-right: 10px;
  border: 1px solid red
}

[data-object-fit='cover'] {
  object-fit: cover
}

[data-object-fit='contain'] {
  object-fit: contain
}

<img data-object-fit='cover' src='//picsum.photos/1200/600' />
<img data-object-fit='contain' src='//picsum.photos/1200/600' />
<img src='//picsum.photos/1200/600' />

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)

`background-size: cover` is the usual workaround for IE/Edge that solves most cases of this. — TylerH, Jun 13 '16 at 14:58
@TylerH yes, but then you have to change from `img` to `background img` — dippas, Jun 13 '16 at 15:00
Maybe a silly question, but is background-img less good for SEO then an actual image? — Peter van Remmen, Jun 17 '16 at 13:04
Update for 2019 is the best answer right here. Minor note... you could make it a bit clearer that it needs to be transpiled. And I think ES5 might be too new, common might be better for compatibility. A link to an online transpiler that I used: https://babeljs.io/repl — Davey, Jan 09 '20 at 11:11
@Davey I have this note on top of the JS code `//for browsers which doesn't support object-fit (you can use babel to transpile to ES5)` I don't know if you saw that. Although I will update the answer to have the transpiled version as well — dippas, Jan 09 '20 at 11:14
@dippas In addition, `background-image` is also not accessibility friendly. — hazelnut, Mar 30 '20 at 03:13
@dippas On IE11 I get error for `forEach` method, it seems not supported. Could you provide a version of your solution compatible with IE11? — Fred K, Nov 16 '20 at 10:51
@dippas I tried with this polyfill https://developer.mozilla.org/it/docs/Web/API/NodeList/forEach. Now I don't get error anymore, but it just doesn't add `style="..."` on the ``, it just inject the code into `src="..."`, so I get no image as background. EDIT: maybe I'm wrong, it was IE11 console that doesn't show the style="" attribute but it shows in compiled tab! — Fred K, Nov 16 '20 at 11:28

score 12 · Answer 3 · answered Apr 25 '18 at 14:43

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.

This is also the correct answer so it's specific to IE. – nathanielperales Feb 07 '20 at 08:04 — nathanielperales, Feb 07 '20 at 08:04

TheMisir · Answer 4 · 2018-05-23T07:56:58.607

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
    });
});

score 8 · Accepted Answer · edited Jun 14 '21 at 14:33

8

Here's a CSS solution to fix this. Use the below css.

.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%;
}

HTML from the OP:

<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

edited Jun 14 '21 at 14:33

dippas

58,591
15
114
126

answered Jun 13 '16 at 15:08

Lucian

1,715
3
17
26

1

I did it with a little twist. Also had to add 50% width and remove left:0 if I want to be on the right side. But it's very useful. Thanks! – Peter van Remmen Jun 15 '16 at 11:44
Seems to be broken. – Florian Wendelborn Feb 25 '17 at 07:21
@Dodekeract can you be more specific? – Lucian Feb 25 '17 at 18:52
@Lucian [Run Code Snippet] does nothing for me on Chrome, Firefox and Safari. Literally just a white rectangle. – Florian Wendelborn Feb 25 '17 at 23:17
@Dodekeract did you even read all the question? and did you check the link provided by OP? the code i provided is just the solution, it won't work here in the snippet but works only when used in that case scenario. – Lucian Feb 26 '17 at 06:19
1

Lucian Easy now, @Dodekeract is asking you to improve your answer for the benefit of the community. – Lars Gyrup Brink Nielsen Sep 16 '17 at 11:21
@Lucian Could you please justify your statement : Here is the "only" CSS solution to fix this? – Furqan Rahamath Oct 27 '19 at 18:13
@MohammedFurqanRahamathM sorry I didn't get your point. do you need the explanation for the answer? – Lucian Oct 30 '19 at 09:49
3

@Lucian Apologies for not being clear. I was wondering if you could explain why the approach you've taken is the 'only' way in CSS to answer the above question? Because I have my answer, in CSS, which uses a different approach but it still works. I wanted to understand your point. – Furqan Rahamath Oct 31 '19 at 02:04

score 3 · Answer 6 · answered Mar 05 '20 at 08:29

I achieved satisfying results with:

min-height: 100%;
min-width: 100%;

this way you always maintain the aspect ratio.

The complete css for an image that will replace "object-fit: cover;":

width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
position: absolute;
right: 50%;
transform: translate(50%, 0);

score 2 · Answer 7 · answered Apr 06 '21 at 08:11

parent div:

height: 584px;
display: block;
background-position: center center;
background-size: cover;
width: 100%;
position: absolute;
overflow: hidden;
background-color: #fff;

child img

object-position: center center;
min-height: 100%;
display: block;
position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
width: auto;
min-width: 100%;
max-width: none;
-o-object-fit: cover; // you can keep them for modern browsers
object-fit: cover; // you can keep them for modern browsers
height: 100%;

fiddle: http://jsfiddle.net/j6hLaxz8/

This is an ingenious solution, especially because you resolved this without resorting to `background-image`. — Marcos Buarque, Apr 19 '21 at 20:49

IE and Edge fix for object-fit: cover;

7 Answers7

Here is a demonstration of the above logic.

UPDATE(2019)

UPDATE(2018)

Linked

Related