Discussion :

[nicordi]

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

[Kerod]

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

[Candygirl]

en css:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[Lancelot du Lac]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[Erwan31]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[Lancelot du Lac]

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.