Question sur affichage d'images

Question

Bonjour,

Je bloque bêtement sur un truc...
Je souhaite afficher des images dont la taille va s'adapter en fonction de la fenêtre.
Ex: j'ai des images allant jusqu'à par ex 1600x1200 maximum, et certaines ne sont que de 800x600. Je veux que chaque image soit affichée au max de le fenêtre du navigateur, sans déformation bien entendu. Donc une personne en 1024 verra les petites images en 800x600, et les grandes seront donc redimensionnées en 1024.

Je pense qu'il ne s'agit que d'un paramétrage de width et de height, mais je ne m'en sors pas (un 100% va forcément agrandir les petites images...).

Dois-je passer par une moulinette qui retaille avant affichage ? Ou ai-je raté un truc tout simple?

Merci d'avance pour votre aide.

cs_bultez · Answer

Bonjour, >>...je veux que chaque image soit affichée au max de le fenêtre du navigateur... >>..un 100% va forcément agrandir les petites images... ben oui... ce n'est pas ce que tu veux ? c'est pourtant ce que tu demandes. ou alors je n'ai pas compris....

Cordialement Bul [mon Site] [M'écrire]

mdemo · Answer

Bonjour Bultez,

Prenons le cas d'une fenêtre en 1024x768.
En mettant à 100% largeur et hauteur une image en 800 x 600 se retrouve agrandie au max donc déformée.
Et une image en 1600x1200 se retrouve trop grande et pas reformatée en 1024, donc on se retrouve avec les scrollbars.
Mettre une largeur ou une hauteur fixes provoque le même type de phénomène.

Ce que je souhaite si je suis par exemple en 1024, c'est que les 800x600 restent en 800x600, et que les 1600x1200 s'ajustent à l'écran.

Donc en gros que mes images s'adaptent à la fenêtre dès qu'elles ont largeur OU hauteur supérieurs à celles de la fenêtre.

Suis-je plus clair?

Merci

cs_bultez · Answer

normalement ? ( je ne suis pas sûr de ce que je dis ! ), avec un % sur l'une des dimensions , les navigateurs appliquent l'équivalant sur l'autre. ====> n'indiquer que la dimension la plus petite ? ...et voir si ça convient... si ça ne marche pas, effectivement il va falloir faire le calcul "manuellement" "adapter" la plus petite des dimensions. règle de trois pour l'autre. mais je dis peut-être n'importe quoi...

Cordialement Bul [mon Site] [M'écrire]

mdemo · Answer

Je crois en effet que la seule solution est de coder.
Pas bien compliqué à priori, mais le plus gros pb est à chaque fois les histoires de navigateurs...
Merci pour ton aide.

cs_roro06 · Answer

Bonjour




pour précision :  j'ai eu les mêmes "problèmes", si c'en est, et ma décision, "au final" a été de coder côté serveur un objet qui crée "à la volée" une vignette aux dimensions que je lui précise. J'ai utilisé pour cela imageMagick, c'est, comme son nom l'indique, Magique (oui, oui, avec un M majuscule). Faut se pencher sur l'API, mais c'est très puissant, gratuit, utilisable aussi bien en PHP qu'en ASP, sous windows ou sous Linux. Bémol : il faut l'installer sur le serveur.

Cordialement
Roro webDev

Flachy Joe · Answer

Voila un script PHP qui fait exactement ce que dis Roro, mais avec la bibliothèque GD : $maxwidth) $scale = $maxwidth/$width; if ($height > $maxheight) $scale = max($scale, $maxheight/$height); if ($width < $minwidth) $scale = $minwidth/$width; if ($height < $minheight) $scale = max($scale, $minheight/$height); //Nouvelles dimensions $newwidth = $scale * $width; $newheight = $scale * $height; //Image temporaire $tmp = imagecreatetruecolor($newwidth, $newheight); // Redimensionnement imagecopyresampled($tmp, $source, 0, 0, 0, 0, $newwidth, $newheight, $width, $height); //Nouvelle image $thumb = imagecreatetruecolor(min($newwidth,$maxwidth), min($newheight,$maxheight)); //Rognage if ($newheight > $maxheight){ $delta = $newheight - $maxheight; imagecopy($thumb,$tmp, 0,0,0,$delta/2,$newwidth,$maxheight); }elseif ($newwidth > $maxwidth){ $delta = $newwidth - $maxwidth; imagecopy($thumb,$tmp,0,0,$delta/2,0,$maxwidth,$newheight); }else{ $thumb = $tmp; } }else{ //Changement d'echelle if ($width > $maxwidth) $scale = $maxwidth/$width; if ($height > $maxheight) $scale = min($scale, $maxheight/$height); if ($width < $minwidth) $scale = $minwidth/$width; if ($height < $minheight) $scale = max($scale, $minheight/$height); if ($scale == 1) sendSource($filename); //Nouvelles dimensions $newwidth = $scale * $width; $newheight = $scale * $height; //Nouvelle image $thumb = imagecreatetruecolor($newwidth, $newheight); // Redimensionnement imagecopyresampled($thumb, $source, 0, 0, 0, 0, $newwidth, $newheight, $width, $height); } //Affichage $fctImage($thumb); ?> Flachy Joe

mdemo · Answer

Merci beaucoup pour vos infos.
Comme quoi on croit parfois que la solution doit pouvoir tenir en une ligne, mais ce n'est pas toujours le cas...
Je vais jeter un oeil à imageMagick... Par contre désolé pour le php car je suis un adepte de asp.net
Et oui il en faut bien quelques uns !
Merci.

Question sur affichage d'images

7 réponses

Votre réponse

Discussions similaires