11550 sujets

JavaScript, DOM et API Web HTML5

Salut à tous,

Voila, j'ai un petit problème sous IE avec les image. Pour le site que je suis en train de réaliser, j'essaye de faire un design fluide. Ce site est une galerie de tableau. Ce que je voudrais donc, c'est redimensionner les images en fonction de la taille de la fenetre et également les centrer sur la page.

Pour redimensionner les images, j'utilise cette fonction javascript :

function resize()
{
 /** Bloc qui contient l'image **/
 bloc = document.getElementById("tableau");

 /** On récupère la largeur du bloc **/
 var divW = bloc.offsetWidth;
 /** On multiplie la largeur par 4/3 car la largeur est en % dc il faut que la hauteur soit proportionnelle à la largeur tout le temps **/
 var divH = divW * (4/3);

 /** on récupère l'id de l'image **/
 var img = document.getElementById("img");
 imgW = img.width;
 imgH = img.height; 

 var ratio_W = divW / imgW;
 var ratio_H = divH / imgH;

 var ratio = (ratio_W < ratio_H) ? ratio_W : ratio_H;
 
 var imgW = img.width * ratio;
 var imgH = img.height * ratio;

 img.width = imgW;
 img.height = imgH;
}

window.onload = resize; window.onresize = resize;


Voici la partie HTML :

<div id="page">
  <h3>Titre du tableau</h3>
  <div id="tableau">
   <img src="./images/Casino.jpg" alt="Casino" id="img" />
  </div>
</div>


Ce que je ne comprend pas c'est que sous FF & Opera l'image se redimensionne correctement alors que sous IE l'image garde sa taille d'origine et c'est en fait le conteneur (id="page") qui s'agrandi.
Que de mystère.

Je vous remercie d'avance pour votre aide
Modifié par ymhotepa (29 Aug 2005 - 17:00)