Sabemos que se a tarefa de gerar miniaturas ficar a cargo de um programa, o efeito será muito melhor. Porém, às vezes devido a certos fatores, como o servidor não suportar GD, é inevitável pedir ao CSS para fazer isso por você.
Para reduzir uma imagem grande para um determinado tamanho, para navegadores modernos, basta usar as propriedades CSS max-width e max-height.
Para o IE 6.0 e versões anteriores, as duas propriedades CSS acima serão ignoradas. Para lidar com esse tipo de coisa antes, muitas vezes recorríamos ao Javascript e depois adicionávamos eventos onload às imagens. Por exemplo:
<imgsrc="..."alt="..."onload="resizeImage(this)"/>
<scripttype="texto/javascript">
functionresizeImage(obj){
obj.width=obj.width>50&obj.width>obj.height?50:auto;
obj.height=obj.height>50?50:auto;
}
</script>
Isso certamente pode resolver o problema, mas causará problemas ao atualizar páginas futuras - à medida que os navegadores melhorarem seu suporte a CSS, mais cedo ou mais tarde removeremos todos os eventos onload das imagens. É hora de mostrar o Expression Como o IE suporta a colocação de alguns scripts em CSS através do Expression, e este script está disponível apenas para o IE 6.0 e versões anteriores, é perfeito para gravá-lo no Expression.
Finalmente, para reduzir uma imagem grande para 50px*50px, você pode consultar o seguinte CSS:
.thumbImage{
largura máxima: 50px;
altura máxima: 50px;
}
*html.thumbImage{
largura:expressão(this.width>50&&this.width>this.height?50:auto);
altura:expressão(this.height>50?50:auto);
}
