Question sur affichage d'images

Signaler
Messages postés
90
Date d'inscription
mardi 21 mars 2006
Statut
Membre
Dernière intervention
10 mai 2010
-
mdemo
Messages postés
90
Date d'inscription
mardi 21 mars 2006
Statut
Membre
Dernière intervention
10 mai 2010
-
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.

7 réponses

Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
27
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....




<hr />



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



<hr />
Messages postés
90
Date d'inscription
mardi 21 mars 2006
Statut
Membre
Dernière intervention
10 mai 2010

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
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
27
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...

<hr />


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



<hr />
Messages postés
90
Date d'inscription
mardi 21 mars 2006
Statut
Membre
Dernière intervention
10 mai 2010

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.
Messages postés
732
Date d'inscription
jeudi 2 janvier 2003
Statut
Membre
Dernière intervention
29 octobre 2007

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
Messages postés
2120
Date d'inscription
jeudi 16 septembre 2004
Statut
Membre
Dernière intervention
4 novembre 2019
1
Voila un script PHP qui fait exactement ce que dis Roro, mais avec la bibliothèque GD :

<?php
/*
Script de redimensionnment d'image.
Param&egrave;tres :
    file :            URL de l'image &agrave; redimensionner
    maxwidth, maxheight :    Taille maximale de l'image.
    minwidth, minheight :    Taille minimale de l'image.
    portion :        (booleen) Rogne pour atteindre maxwidth ET maxheight
Redimensionne l'image de mani&egrave;re &agrave; ce que ses dimensions soit comprise entre les tailles minimales et maximales. Le fichier source n'est pas modifi&eacute;.
Utilisation typique : affichage d'une miniature de photo. Les donn&eacute;es transmises au client sont r&eacute;duites.
Exemple :
*/

// Attention à ne pas envoyer de texte : texte + image = BUG
error_reporting(0);

//Param&egrave;tres
$filename = $_GET['file'];
$maxwidth = $_GET['maxwidth'];
$maxheight = $_GET['maxheight'];
$minwidth = $_GET['minwidth'];
$minheight = $_GET['minheight'];
$portion = $_GET['portion'];

//Existence du fichier
if (!file_exists($filename)){
    header('Content-type: text/html');
    echo 'Fichier Introuvable !';
    exit;
}

//Pour renvoyer l'image source
function sendSource($filename){
    readfile($filename);
    exit;
}

// Mesure des dimensions
$size = getimagesize($filename);

//V&eacute;rification des dimensions
$width = $size[0];
$height = $size[1];

if (!isset($_GET['maxwidth']))
    $maxwidth = $width;
if (!isset($_GET['maxheight']))
    $maxheight = $height;

//Pas de changement de type...
header("Content-type: {$size['mime']}");

//Pr&eacute;sence de l'extension GD, IMG_JPEG n'est d&eacute;fini que si elle est pr&eacute;sente.
if (!IMG_JPEG)
    sendSource($filename);

//D&eacute;termine les fonctions correspondant au type
switch ($size[2]){
case IMG_GIF:
    $fctImageCreate = imagecreatefromgif;
    $fctImage = imagegif;
    break;
case IMG_JPEG:
    $fctImageCreate = imagecreatefromjpeg;
    $fctImage = imagejpeg;
    break;
case IMG_PNG:
    $fctImageCreate = imagecreatefrompng;
    $fctImage = imagepng;
    break;
case IMG_WBMP:
    $fctImageCreate = imagecreatefromwbmp;
    $fctImage = imagewbmp;
    break;
case IMG_XBM:
    $fctImageCreate = imagecreatefromxbm;
    $fctImage = imagexbm;
    break;
default:
    //Type non g&eacute;r&eacute;
    sendSource($filename);
}

//Chargement
$source = $fctImageCreate($filename);

if ($portion){
    //Change d'echelle et rogne
    if ($width > $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
Messages postés
90
Date d'inscription
mardi 21 mars 2006
Statut
Membre
Dernière intervention
10 mai 2010

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.