[HTML] Taille d'une image

Salut

J'ai une question tout bete.

Est-il possible en HTML de donner une taille maximale à une image.

Un truc du style :

si l'image <= taille alors on l'affiche tel quel
Sinon on la affiche l'image avec la taille maximum autorisé

Si pas possible est ce que l'ojn peut avoir cette possibilité avec du javascript, du CSS ou même du PHP???

Merci pour vos réponses.

Cordialement

@+ Nico

En (X)HTML tu fixes la taille de ton image et cette taille ne sera pas dépassée. Par contre si elle est trop petite alors elle est redimensionnée à la taille que tu auras fixé. Donc pas top.

En CSS même chose.

En JavaScript c'est possible et même chose pour le PHP ;)

en css:

Code:

---

img {max-width:200px;} /* taille maximum autorisé */

---

Avec 2 bémols:

• IE 6 n'interprète pas la max-width
• Le redimensionnement par le navigateur pour les grandes images peut être assez moche.

Je te conseille php, ce sera assez simple. Vive les technologies côté serveur! Et puis d'un autre côté pour le javascript je serais incapable de t'aider, j'y connais rien de rien.

La fonction qui t'intéresse est getimagesize().

Ensuite, tu peux utiliser l'opérateur ternaire si tu le souhaites dans ton CSS.

Allez hop, du code:

Code:

---

1 2 3 4 5

<?php $imagesize = getimagesize("C:/chemin/image.jpg") ?> img { width: <?php echo (($imagesize[0] > 200) ? "200" : $imagesize[0]); ?>px; height: <?php echo (($imagesize[0] > 200) ? (int) (200*$imagesize[1]/$imagesize[0]) : $imagesize[1]); ?>px; }

---

Ce bout de CSS dynamique fera ce que tu veux, sous réserve qu'il n'y ait pas d'erreur. Il ne redimentionne que si la largeur de l'image est de plus de 200 pixels.

Je suis au boulot, désolé pas possible de débugger. Néanmoins les autres te signaleront probablement les erreurs s'il y en a. Si tu décides de l'utiliser, reviens me dire si ça a marché.

Je ne sais pas très bien comment on fait pour le mettre en place dans un ficher séparé du html, mais d'autres pourront t'expiquer. Sinon tu peux simplement le mettre dans le header html pour éviter les mises en cache qui pourraient te géner (dans ce dernier cas, place-le entre les balises style appropriées, of course).

Hum, suis-je bête, à priori il n'est pas nécessaire de spécifier la hauteur. "height: auto;" devrait suffire, voire rien du tout comme fait Candy. Essaye sans rien pour voir.

Ah oui, et comme il se doit, l'intérêt du php sera de te délivrer de la limitation mentionnée par Candy pour IE6.

Citation:

---

Envoyé par Lancelot du Lac

Hum, suis-je bête, à priori il n'est pas nécessaire de spécifier la hauteur. "height: auto;" devrait suffire, voire rien du tout comme fait Candy. Essaye sans rien pour voir.

---

Dans ce cas non mais il peut être nécessaire pour adapter la hauteur de
l'image homotétiquement lors du redimensionnement du viewport (zone d'affichage), seulement si la largeur de l'image est spécifiée en %.
Exemple:

Code:

---

img {max-width:100%; height:auto}

---

C'est d'ailleurs ce qu'il est conseillé de mettre dans la CSS pour le redimensionnement homotétique de l'image en cas de visualisation du document sur petits écrans.
En effet il faut éviter de mettre du PHP ou JS dans la css principale car ils
font perdre de mécanisme de mise en cache de la CSS par le navigateur.

S'il fait du php, nicordi perd la mise en cache du css par les navigateurs. S'il fait du css seul, les utilisateurs d'IE6 n'obtiennent pas l'affichage correct de sa page...

Le raffinement ultime serait de détecter le navigateur de l'utilisateur à l'aide de la superglobale $_SERVER['HTTP_USER_AGENT'], de basculer sur un fichier CSS cachable si celui-ci fait partie d'une liste de navigateurs connus pour interpréter max-width correctement, ou bien sur le CSS dynamique dans tous les autres cas.