CSS. Simulación de object-fit: cover para IE

ie-object-fit

La propiedad CSS object-fit de usa para especificar como un tag <img> puede ser redimensionado para llenar su contenedor.

Esta propiedad no está disponible en Internet Explorer (IE), haciendo que las imágenes salgan distorsionadas en este explorador, y especialmente en el caso de utilizar grids.

Una posible solución para hacerlo compatible con el resto de exploradores puede ser la siguiente: pasar la imagen al background, donde si se existe la propiedad de redimensionado equivalente en IE (background-size).

Para hacerlo de forma general a la página web que estemos desarrollando, podemos utilizar un script para realizar esta función si el explorador es IE.

En este ejemplo vamos a realizar este proceso para los <img> de las clases .photo-img y .wp-post-image, que habremos definido en el código HTML o vendrá dado por el CMS.

Modificaremos el archivo functions.php, añadiendo el archivo img-background.js en la carpeta js de nuestro tema (WordPress). En el archivo functions.php, añadimos el siguiente código para cargar la función que va a realizar el proceso indicado:

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 sólo actuará si el explorador es IE. El fichero img-background.js contendrá el siguiente código:

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" );
    });
  });
});

donde, por medio del atributo style ponemos la imagen fuente en la propiedad background-image, la redimensionamos con la propiedad background-size:cover; la posicionamos en el centro (background-position: 50% 50%) y la ajustamos a su contenedor (height: 100%). Finalmente se elimina el atributo de la imagen fuente (src). Hay que tener en cuenta que el contenedor padre del <img> debe tener definida su altura (height). De forma genérica podemos definir este último aspecto para determinados contenedores en el fichero de estilos (style.css) y que sólo actúe en IE

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

En Doowebs somos una empresa valenciana que podemos ayudarte con el desarrollo de tu web.

Llamar a Doowebs Teléfono de Doowebs 653836347