Nous savons que si la tâche de générer des vignettes est laissée à un programme, l'effet sera bien meilleur. Cependant, parfois en raison de certains facteurs, comme le serveur ne prenant pas en charge GD, il est inévitable de demander à CSS de le faire à votre place.
Pour réduire une grande image à une certaine taille, pour les navigateurs modernes, utilisez simplement les propriétés CSS max-width et max-height.
Pour IE 6.0 et versions antérieures, les deux propriétés CSS ci-dessus seront ignorées. Pour gérer ce genre de choses auparavant, nous avions souvent recours à Javascript puis ajoutions des événements onload aux images. Par exemple:
<imgsrc="..."alt="..."onload="resizeImage(this)"/>
<scripttype="text/javascript">
fonctionresizeImage(obj){
obj.width=obj.width>50&&obj.width>obj.height?50:auto;
obj.hauteur=obj.hauteur>50?50:auto;
}
</script>
Cela peut certainement résoudre le problème, mais cela entraînera des problèmes lors de la mise à niveau des pages futures - à mesure que les navigateurs améliorent leur prise en charge du CSS, nous supprimerons tôt ou tard tous les événements de chargement des images. C'est l'heure du spectacle d'Expression. Étant donné qu'IE prend en charge le placement de certains scripts en CSS via Expression et que ce script n'est disponible que pour IE 6.0 et versions antérieures, il est parfait pour l'écrire dans Expression.
Enfin, pour réduire une grande image à 50 px*50 px près, vous pouvez vous référer au CSS suivant :
.thumbImage{
largeur maximale : 50 px ;
hauteur maximale : 50 px ;
}
*html.thumbImage{
width:expression(this.width>50&&this.width>this.height?50:auto);
hauteur:expression(this.height>50?50:auto);
}
