Sabemos que si la tarea de generar miniaturas se deja en manos de un programa, el efecto será mucho mejor. Sin embargo, a veces, debido a ciertos factores, como que el servidor no admita GD, es inevitable pedirle a CSS que lo haga por usted.
Para reducir una imagen grande a un tamaño determinado, en los navegadores modernos, simplemente utilice las propiedades CSS de ancho máximo y altura máxima.
Para IE 6.0 y versiones anteriores, se ignorarán las dos propiedades CSS anteriores. Para lidiar con este tipo de cosas antes, a menudo recurrimos a Javascript y luego agregamos eventos de carga a las imágenes. Por ejemplo:
<imgsrc="..."alt="..."onload="resizeImage(this)"/>
<scripttype="texto/javascript">
funciónresizeImage(obj){
obj.width=obj.width>50&&obj.width>obj.height?50:auto;
obj.altura=obj.altura>50?50:auto;
}
</script>
Esto ciertamente puede resolver el problema, pero causará problemas al actualizar páginas futuras: a medida que los navegadores mejoren su soporte para CSS, tarde o temprano eliminaremos todos los eventos de carga de las imágenes. Es el momento del show de Expression. Dado que IE admite la colocación de algunos scripts en CSS a través de Expression, y este script solo está disponible para IE 6.0 y versiones inferiores, es perfecto escribirlo en Expression.
Finalmente, para reducir la escala de una imagen grande a 50 px * 50 px, puede consultar el siguiente CSS:
.thumbImage{
ancho máximo: 50 px;
altura máxima: 50 px;
}
*html.thumbImage{
ancho:expresión(este.ancho>50&&este.ancho>este.alto?50:auto);
altura:expresión(esta.altura>50?50:auto);
}
