javascript Image Redimensionner

Question

Quelqu'un sait-il comment redimensionner une image proportionnellement à l'aide de javascript?, j'ai essayé de modifier le DOM en ajoutant des attributs hauteur et largeur à la volée, mais il semble que cela ne fonctionne pas sur IE6

Answer 1

Pour modifier une image proportionnellement, modifiez simplement l'une des propriétés css width / height, laissez l'autre définie sur auto.

 image.style.width = '50%'
image.style.height = 'auto'
 

Cela garantira que son rapport d'aspect reste le même.

Gardez à l'esprit que les navigateurs ont tendance à craquer de redimensionner les images - vous constaterez probablement que votre image redimensionnée a l'air horrible.

Answer 2

ok il a résolu, voici mon code final

 if($(this).width() > $(this).height()) { 
 $(this).css('width',MaxPreviewDimension+'px');
 $(this).css('height','auto');
} else {
 $(this).css('height',MaxPreviewDimension+'px');
 $(this).css('width','auto');
}
 

Merci les gars

Answer 3

Au lieu de modifier les attributs height et width de l'image, essayez de modifier le CSS de la hauteur et la largeur.

myimg = document.getElementById('myimg');
myimg.style.height = "50px";
myimg.style.width = "50px";

Une commune "gotcha", c'est que la hauteur et la largeur de styles sont des chaînes de caractères qui comprend une unité, comme "px" dans l'exemple ci-dessus.

Edit - je pense que le réglage de la hauteur et de la largeur directement au lieu d'utiliser le style.de la hauteur et du style.largeur de travail. Elle aurait aussi l'avantage d'avoir déjà les dimensions d'origine. Pouvez-vous mettre un peu de votre code? Êtes-vous sûr que vous êtes dans le mode standard au lieu de la mode quirks?

Cela devrait fonctionner:

myimg = document.getElementById('myimg');
myimg.height = myimg.height * 2;
myimg.width = myimg.width * 2;

Answer 4

J'ai répondu à cette question ici: Comment redimensionner les images proportionnellement / en conservant les proportions? . Je le copie ici parce que je pense vraiment que c'est une méthode très fiable :)

 /**
* Conserve aspect ratio of the orignal region. Useful when shrinking/enlarging
* images to fit into a certain area.
*
* @param {Number} srcWidth Source area width
* @param {Number} srcHeight Source area height
* @param {Number} maxWidth Fittable area maximum available width
* @param {Number} maxHeight Fittable area maximum available height
* @return {Object} { width, heigth }
*
*/
function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {

    var ratio = [maxWidth / srcWidth, maxHeight / srcHeight ];
    ratio = Math.min(ratio[0], ratio[1]);

    return { width:srcWidth*ratio, height:srcHeight*ratio };
}
 

Answer 5

Essayé le code suivant, a fonctionné correctement sur IE6 sur WinXP Pro SP3.

 function Resize(imgId)
{
  var img = document.getElementById(imgId);
  var w = img.width, h = img.height;
  w /= 2; h /= 2;
  img.width = w; img.height = h;
}
 

Aussi OK dans FF3 et Opera 9.26.