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 que podemos ayudarte con el desarrollo de tu web.