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.

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.

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