Uninstallme
Desarrollo front-end, estándares web, accesibilidad y más
Suavizado de imágenes redimensionadas con CSS en Internet Explorer
Por kcmr, el 5 de noviembre de 2009 en Buenas ideas, CSS, Navegadores
Cuando forzamos el tamaño de una imagen mediante CSS reduciendo su ancho o alto original, nos encontramos con que Internet Explorer hace cosas feas. A falta de palabras para describirlo, nada mejor que una captura:
Imágenes redimensionadas en Explorer 7
En el blog de ZURB, que por cierto, me encanta, nos muestran un pequeño truco para suavizar las imágenes en Internet Explorer entre otras técnicas para mejorar la presentación visual en varios navegadores
img{-ms-interpolation-mode: bicubic;}
Este método no funciona en Internet Explorer 6, para el que proponen usar algo un poco más sucio que lo anterior:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/path/to/image.jpg', sizingMethod='scale');
Afortunadamente, Internet Explorer 8 no tiene este problema.
Demo suavizado de imágenes (sólo para IE 7)
Actualización: script para aplicar el filtro a las imágenes redimensionadas
En este comentario proponen el uso de un pequeño script en jQuery para detectar si una imagen está redimensionada y en ese caso aplicarle el estilo correspondiente para IE 7 y el filtro para IE 6. De esta forma evitamos tener código no válido en la CSS y aplicamos estos estilos sólo a las imágenes que lo requieran. Ya que el código no aparece muy bien formateado en los comentarios, lo pego aquí.
Gracias por la aportación!
jQuery.each($('img'), function() {
ancho_forzado = $(this).width();
img = new Image();
img.src = $(this).attr('src');
ancho_real = img.width;
if (ancho_forzado != ancho_real) {
if ($.browser.version.substr(0,1) == '7') {
this.style.msInterpolationMode = "bicubic";
} else if ($.browser.version.substr(0,1) == '6') {
$(this).attr('width', ancho_forzado);
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + img.src + "', sizingMethod='scale')",
this.runtimeStyle.paddingTop = this.height,
this.runtimeStyle.height = 0;
}
}
});
Deja tu comentario
Campos obligatorios marcados con asterisco *
2 comentarios
Por doblefantasia, el 5 de noviembre de 2009
Genial el blog de ZURB, gracias por compartirlo
Por más que HTML, el 7 de noviembre de 2009
Si fuerzas el tamaño de la imagen desde HTML, con width o height, tienes el mismo problema.
He estado buscando alguna función en javascript, que comprobase si las imágenes estaban redimensionadas y les aplicase el filtro correspondiente para IE.
No he encontrado nada que funcionase como quería, así que he hecho un pequeño script. Es un poco chapuza tal y como está. A ver que te parece:
jQuery.each($(‘img’), function() {
ancho_forzado = $(this).width();
img = new Image();
img.src = $(this).attr(‘src’);
ancho_real = img.width;
if (ancho_forzado != ancho_real) {
if ($.browser.version.substr(0,1) == ’7′) {
this.style.msInterpolationMode = “bicubic”;
} else if ($.browser.version.substr(0,1) == ’6′) {
$(this).attr(‘width’, ancho_forzado);
this.runtimeStyle.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’” + img.src + “‘, sizingMethod=’scale’)”,
this.runtimeStyle.paddingTop = this.height,
this.runtimeStyle.height = 0;
}
}
});