IE and Edge fix for object-fit: cover;

by

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.

More Related Contents:

  1. How do I make background-size work in IE?
  2. Text in a flex container doesn’t wrap in IE11
  3. CSS rotate property in IE
  4. Internet Explorer’s CSS rules limits
  5. IE display: table-cell child ignores height: 100%
  6. IE 6 & IE 7 Z-Index Problem
  7. CSS flexbox not working in IE10
  8. @font-face works in IE8 but not IE9
  9. How does one target IE7 and IE8 with valid CSS?
  10. Internet Explorer z-index bug?
  11. z-index does not work in Internet Explorer with pdf in iframe
  12. Bootstrap dropdowns menus appearing behind other elements – IE7
  13. CSS Selector for
  14. Any way to remove IEs black border around submit button in active forms?
  15. Flex auto margin not working in IE10/11
  16. CSS transitions with calc() do not work in IE10+
  17. element not working in Internet Explorer 11
  18. CSS rounded corners in IE8
  19. Icon fonts not loading in IE11
  20. Detecting IE version using CSS Capability/Feature Detection
  21. How to Identify Microsoft Edge browser via CSS?
  22. On IE CSS font-face works only when navigating through inner links
  23. Does Internet Explorer support CSS transitions?
  24. CSS3 3D Transform doesn’t work on IE11
  25. IE not rendering CSS properly when the site is located at networkdrive
  26. How to target Microsoft Edge with CSS? [duplicate]
  27. How to fix Internet explorer 7 bug when using percentage widths for layout?
  28. with an inner not triggering :active state in IE 8
  29. filter: blur(1px); doesn’t work in Firefox, Internet Explorer, and Opera
  30. how to make sure select option text align in the center in IE?

Leave a Comment