Limiter la taille d'une image

Sujet résolu

30 janvier 2006 à 11:37:58

Bonjour à tous.

Voila, j'ai un souci.
Sur mon site, se trouve des images de tailles différentes. Mais je souhaite les faire apparaitre dans une zone d'hauteur 80px et de largeur 170px.
Le problème est que j'ai des images plus petite (pas de soucis avec elles) et des images plus grandes.
Lorsque j'impose une taille dans la balise <IMG></IMG> Les grandes images sont réduites jusqu'à la taille souhaité, mais les petites sont agrandis.
Je souhaiterai donc savoir si il existerait un moyen d'avoir toute l'image (overflow) avec sa taille normal si elle est inférieure et une taille réduite (tout en gardant la proportionnalité) si elle est plus grande.

Merci d'avance.

zeunyton

30 janvier 2006 à 14:02:31

je sais que sais en javascript que tu dois le faire mais je ne sais plus dire comme sa quelle script exactement
EJS tu devrais trouver se que tu cherche

Thuffir

30 janvier 2006 à 14:31:49

Tu as tout à fait raison. J'ai cherché sur le net et je suis parvenu, par Javascript, à réaliser ce que je cherchais.
Je donne le lien vers le site qui m'a permis de trouver.

http://www.asp-php.net/scripts/scripting/jsimgredim.php

Après essais, ça marche parfaitement.

Thuffir

31 janvier 2006 à 9:15:16

Je rajoute ceci également car il s'est avéré que le code donné sur le site provoquait parfois une erreur d'image ce qui nous donnait une image d'un pixel.
Il suffisait donc de réinitialisé l'image tant que les dimensions sont trop petites. Pensez donc à changer les valeurs si vous avez des images de quelques pixels.

Citation : Thuffir

<HEAD>
<SCRIPT type="text/JavaScript">
//JAVASCRIPT redimensionnement de l'image.
function redimImage(inImg){
// Cette function recoit 1 parametres
// inImg : Chemin relatif de l'image
var maxWidth = 160;
var maxHeight = 75;
// Declarations des variables "Nouvelle Taille"
var dW = 0;
var dH = 0;
// Declaration d'un objet Image
var oImg = new Image();
// Affectation du chemin de l'image a l'objet
oImg.src = inImg;
// On recupere les tailles reelles
var h = dH = oImg.height;
var w = dW = oImg.width;
// On ré-affecte l'image tant que les dimensions ne correspondent pas
while ((h < 4) && (w < 4)){
oImg.src = inImg;
// On recupere les tailles reelles
var h = dH = oImg.height;
var w = dW = oImg.width;
}
for (i=0; i<2 ;i++){
if(h >= maxHeight){
dH = maxHeight;
dW = parseInt((w * dH) / h, 10);
h = dH;
w = dW;
}
if(w >= maxWidth){
dW = maxWidth;
dH = parseInt((h * dW) / w, 10);
h = dH;
w = dW;
}
}
// On ecrit l'image dans le document
document.writeln("<img src=\"" + inImg + "\" width=\"" + dW + "\" height=\"" + dH + "\" border=\"0\" alt=\"Image de l'article\" />");
};
</SCRIPT>
</HEAD>