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

User · Answer

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

User · Answer

Here is the only 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    lt div class  vc single image-wrapper   vc box border grey  gt     lt 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   gt  lt  div gt   lt  div gt    try this  it should work  also remove float from  row-fluid  span6

User · Answer

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       lt div gt  lt  div gt         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

User · Answer

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   lt div gt  lt  div gt              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

User · Answer

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

User · Answer

There is no rule to achieve that using CSS only  besides the object-fit  that you are currently using   which has partial support in EDGE1 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  x000D   x000D    ES6 version if   objectFit  in document documentElement style     false        document addEventListener  DOMContentLoaded        gt            document querySelectorAll  img data-object-fit    forEach image   gt                 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                          x000D  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   x000D   lt img data-object-fit  cover  src    picsum photos 1200 600    gt   lt img data-object-fit  contain  src    picsum photos 1200 600    gt   lt img src    picsum photos 1200 600    gt  x000D   x000D   x000D   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

[css] IE and Edge fix for object-fit: cover;

Here is a demonstration of the above logic.

Examples related to css

Examples related to internet-explorer

Examples related to microsoft-edge