Alternative option of object-fit:cover for internet explorer

Question

I\'m looking an alternative method of the object-fit:cover for the internet explorer, because is not supporting it. Basically I\'m using the object-fit:cover for not stretch

Answer 1

My approach will ideally work in all browsers as it a simple CSS trick. Please check the images below to see the effect it has.

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 should work in all browsers.

---