11540 sujets

JavaScript, DOM et API Web HTML5

Salut à tous. Je recherche à faire un beau resize d'image en gardant le ratio.

Pour l'instant je met une image dans une div et j'agrandie cette div ou image comme je le désire. Mais je voudrais que l'image garde le ratio ... et je n'sais pas comment faire.

Avez vous une idée ?


if(current_object.firstChild.nodeName == "IMG"){
	var image_en_cours = current_object.firstChild;
		image_en_cours.style.width = largeur+"px";
		var ratio = parseInt(image_en_cours.naturalHeight)/parseInt(image_en_cours.naturalWidth);
		var new_height = parseInt(hauteur)*(ratio);
		image_en_cours.style.height = new_height+"px";
}


Pour l'instant voici le code. les variables hauteur et largeur ont pour valeurs les width et height de la div dans laquelle se trouve l'image.

Rude
Modifié par ffwrude (20 Dec 2007 - 11:05)
Tu peux acceder aux dimentions d'une image avec offsetHeight et offsetWidth, par contre il faut que celle ci soit chargée :


var loadImage = new Image();
  loadImage.onload = function() {
    var heightImage = tonImage.offsetHeight;
    var widthImage = tonImage.offsetWidth;
  };
  loadImage.src = tonImage.src;


Aprés il faut faut faire des bon vieux calcul de produit en croix...
Modifié par matmat (21 Nov 2007 - 22:40)
@ffwrude :

Salut,
Naturalx n'existent pas sous IE, et ce sont des valeurs numériques, donc le parseInt est inutile.

@matmat : pour avoir accès au offset il faut que l'image soit dans le dom, il faut donc utiliser width et height.
Tu as essayé d'utiliser des dimensions en pourcentage ?
Je sais que <img src="..." alt="..." width="200%" height="200%" /> fonctionne, normalement
En fait ce système est censé tourner uniquement sur Firefox. Donc les problèmes de compatibilité ne se posent pas ici.

C'est plus au niveau du calcul du ratio que je peche en fait. Pour les tailles il faut que celles ci soient en pixels car après je dois les récuperer pour redimensionner l'image à la taille demandée.

En fait si vous voulez je les redimensionne à la volée. j'ai une div que je peux redimenssionner à la souris et je voudrais que quand je redimenssionne cette <div> l'image qui est dedans bouge à la bonne taille (ca c'est fait) mais le ratio ... ca c'est pas fait.

Edit : Résolu. Le code que j'ai utilise des variables qui me sont propres mais n'hésitez pas à me demander si vous avez le même soucis.
Modifié par ffwrude (20 Dec 2007 - 11:05)