La propietat CSS object-fit de fa servir per especificar com un tag <img> pot ser redimensionat per omplir el seu contenidor.

Aquesta propietat no està disponible a Internet Explorer (IE), fent que les imatges isquen distorsionades en aquest explorador, i especialment en el cas d’utilitzar grids.

Una possible solució per fer-ho compatible amb la resta d’exploradors pot ser la següent: passar la imatge al background, on si es existeix la propietat de redimensionat equivalent en IE (background-size).

Per fer-ho de forma general a la pàgina web que estiguem desenvolupant, podem utilitzar un script per realitzar aquesta funció si el navegador és IE. En aquest exemple anem a realitzar aquest procés per als <img> de les classes .photo-img i .wp-post-image, que haurem definit en el codi HTML o el dóna el CMS. Modificarem l’arxiu functions.php, afegint el fitxer img-background.js a la carpeta js del nostre tema (WordPress). A l’arxiu functions.php, afegim el següent codi per carregar la funció que realitzarà el procés indicat:

global $is_IE;
if( $is_IE ) {
  add_action('wp_enqueue_scripts','insertar_js');
  function insertar_js(){
  wp_register_script('dw-script-img',get_stylesheet_directory_uri().'/js/img-background.js',array('jquery'),'1',true);
    wp_enqueue_script('dw-script-img');
  }
}

que només actuarà si el navegador és IE. El fitxer img-background.js contindrà el següent codi:

jQuery(function($){
  $(document).ready(function(){
    $("img.img-photo,img.wp-post-image").each(function(){
      $(this).attr({ "style":
        "background-image:url("+$(this).attr('src')+");"
        +"background-size: cover;"
        +"background-position: 50% 50%;"
        +"height: 100%;"
      });
      $(this).removeAttr( "src" );
    });
  });
});

on, per mitjà de l’atribut style posem la imatge font en la propietat background-image, la redimensionamos amb la propietat background-size: cover; la posicionem al centre (background-position: 50% 50%) i l’ajustem al seu contenidor (height: 100%). Finalment, s’elimina l’atribut de la imatge font (src).

Cal tenir en compte que el contenidor pare del <img> ha de tindre la seua altura (height).

De forma genèrica podem definir aquest últim aspecte per a determinats contenidors al fitxer d’estils (style.css) i que només actue en IE

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .container img {
     max-height: 300px;
  }
}