mai
2008
Un article de adiGuba
Vous ne l’aurez peut-être pas remarqué, mais les commentaires des billets du blog sont désormais agrémenté d’un petit avatar propre à chaque participant. Il ne s’agit ni plus ni moins que de l’avatar utilisé sur les forums de developpez.com.
Cette fonctionnalité, apparemment toute simple puisqu’il s’agit d’afficher une image, s’est pourtant révélée assez complexe à mettre en place à cause d’un tout petit problème technique…
Comment limiter la taille d’une image en n’utilisant seulement la feuille de styles CSS ?
Taille originale
C’est tout simple : les avatars du forum peuvent avoir une taille allant jusqu’à 140×100 pixels, ce qui rendait assez mal dans le moteur de blog. La contrainte était alors d’utiliser une taille maximum de 50 pixels à ne pas dépasser, et donc à redimensionner dynamiquement les avatars trop grand tout en gardant leurs proportions, le tout via des CSS puisqu’on ne peut pas manipuler directement les images.
Taille forcée à 50×50 pixels
On pourrait utiliser les propriétés width et height qui représentent respectivement la largeur et la hauteur, mais cette solution possède deux défaut assez important :
- Les images plus petites sont agrandies.
- Les images rectangulaires perdent leurs proportions et sont déformées.
Ce qui donne un résultat pas très esthétique…
Taille limitée à 50×50 pixels
La solution est toute simple et consiste à utiliser les CSS max-width et max-height afin de fixer une valeur maximale, ce qui marche très bien dans la plupart des navigateurs :
- Les images plus petites ne sont pas redimensionnées.
- Les images rectangulaires conservent leurs proportions lors du redimensionnement.
Ce qui donne un résultat parfait sur tous les navigateurs…
max-width: 50px;
max-height: 50px;
… sauf Internet Explorer bien sûr ! Et quoi qu’on puisse penser que navigateur de Microsoft, il est inconcevable de l’ignorer puisqu’il reste malgré tout utilisé par une grande majorité des internautes…
Comme bien souvent avec Internet Explorer, on est obligé de passer par du code non-standard, ici en utilisant les expressions (interprété uniquement par IE), ce qui donnerait pour l’équivalent de max-width et max-height :
width: expression( Math.min(parseInt(this.offsetWidth), 50) );
height: expression( Math.min(parseInt(this.offsetHeight), 50) );
Explication : on force la taille de l’image à la valeur minimal entre la taille réel de l’élément et la valeur maximal, afin que la longueur/largeur ne dépasse pas la valeur indiqué. Tous les autres navigateurs n’interprèterons pas ces valeurs puisqu’il considèreront comme erroné (à juste titre).
A noter qu’on peut également préfixé les noms de propriétés width et height par un underscore afin d’être sûr que cela ne génère aucun conflit avec les autres navigateurs (la propriété n’est alors reconnu que par IE).
Malheureusement ce n’est toujours pas parfait ! En effet les deux expressions se gênent mutuellement, et dans le cas d’une image rectangulaire on peut se retrouver avec une image de 50×50 pixels déformé (cela semble parfois un peu aléatoire), alors que le couple max-width/max-height conserve correctement les proportions de l’image…
Math.min(parseInt(this.offsetWidth), 50 ) : true);
height: expression((this.offsetHeight>this.offsetWidth) ?
Math.min(parseInt(this.offsetHeight), 50 ) : true);
La première condition permet de ne redéfinir que le coté le plus long. L’autre coté se verra associé la valeur true qui n’aura aucun impact sur la taille. Le redimensionnement se fait alors sur le plus grand coté, le tout en conservant bien les proportions…
Bref nous voilà avec un code fonctionnant sur la plupart des navigateurs actuels permettant de limiter la taille d’une image à 50 pixels :
/* Code standard */
max-width: 50px;
max-height: 50px;
/* Code spécial IE */
_width: expression((this.offsetWidth>=this.offsetHeight) ?
Math.min(parseInt(this.offsetWidth), 50 ) : true);
_height: expression((this.offsetHeight>this.offsetWidth) ?
Math.min(parseInt(this.offsetHeight), 50 ) : true);
6 Commentaires + Ajouter un commentaire
Tutoriels
Discussions
- jre 1.5, tomcat 6.0 et multi processeurs
- Recuperation du nom des parametres
- Définition exacte de @Override
- [ fuite ] memoire
- Classes, méthodes private
- Possibilité d'accéder au type générique en runtime
- [REFLEXION] Connaitre toutes les classes qui implémentent une interface
- Difference de performances Unix/Windows d'un programme?
- L'apparition du mot-clé const est-il prévu dans une version à venir du JDK?
Bonjour, en faite ta solution fonctionne, par défaut l’image conserve les bonnes proportions, mais lorsqu’on utilise un slideshow pour passer à l’image suivante la taille de l’image est de nouveau forcée… Et lorsqu’on recharge la page l’image reprend les bonne proportion…Bizarre
A+
Ok, merci d’avoir essayé…
A+
Ludo
Je n’arrive pas à reproduire ton problème…
Peut-être que le fait d’avoir des tailles différentes imposes des conditions différentes pour IE…
a++
Re..
taille de l’image: width:218px × height:330px
taille max souhaité: width:135px × height:101px
l’image ne dépasse effectivement pas la taille max souhaité mais ne respecte pas les proportions, enfaite l’image prend la taille 135px × 101px…
Merci
Ludo
Heu… Je ne comprend pas bien ton problème. D’après mes tests cela marchait dans les deux sens.
Quel est la taille de ton image ? Et la taille maximale que tu souhaites obtenir ?
a++
Bonjour, j’ai testé cette solution et visiblement elle redimensionne proportionnellement les images dans la hauteur mais pas dans la largeur, si la largeur est inférieur elle prend tout de même toute la largeur… Est-ce que je peux y remédier ou pas de solution?
Merci
Ludo