Redimensioner une image en fonction de la hauteur utile de la fenêtre

Version imprimable

Bonjour,

J'essaie de créer une fonction pour redimensionner une image en fonction de la hauteur utile de la fenêtre (c'est à dire la hauteur de la fenêtre moins les barres d'outils, status ....)

Je souhaite qu'au chargement de la page l'image soit redimensioner (A sa première apparition).

Ce code ne fonctionne pas sous IE et encore moins sous Firefox, pourquoi? :(
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <html> <head> <script type="text/javascript"> function resizepict() { var size = document.getElementsByTagName("html")[0]; if (size.offsetHeight+size.offsetTop < 718) { alert(size.offsetWidth+size.offsetLeft); alert(size.offsetHeight+size.offsetTop); // retoure 0 dans Firefox ?? var height = size.offsetHeight+size.offsetTop; document.image.heigth = height; document.image.width = 718*height/875; // L'image originale est en 875x718 } } resizepict(); </script> </head> <body> <img src="test.jpg" name="image" hspace="0" vspace="0"> </body> </html>

02/12/2006, 19h05
FremyCompany

Code:

document.getElementById("ID").style.width="876px"
02/12/2006, 19h45
minogttao

Je ne comprends pas vraiment, dois je remplacer ce code

Code:

var size = document.getElementsByTagName("html")[0];

par celui ci

Code:

var size = document.getElementById("1").style.width="875px";

et modifier cela

Code:

<img src="test.jpg" id="1" name="image" hspace="0" vspace="0">

Mon code du premier post fonctionne en parti car dans les alerts que j'ai mis pour voir l'éxécution du code la hauteur et la largeur utile sont affichées. Par contre dans firefox le calcul de la hauteur retourne toujours zéro.

Et de plus l'image n'est pas redimensionée sous IE et Firefox

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<html>
<head>
</head>
<body>
<img style="position: absolute; top:0px; left:0px; width:100%" src="test.jpg" id="image" name="image" hspace="0" vspace="0">
<script type="text/javascript">
<!--
var theImage = document.getElementById("image");
function resizepict() {
   var size = document.getElementsByTagName("html")[0];
   if (size.offsetHeight+size.offsetTop < 718) {
      var H= size.offsetHeight+size.offsetTop;
      theImage.style.heigth = H+"px";
      theImage.style.width = (718*H/875)+"px"; 
   }
   // Centre l'image :
   var Top = parseInt((size.offsetHeight + size.offsetTop - theImage.offsetHeight)/2)
   var Left = parseInt((size.offsetWidth + size.offsetLeft - theImage.offsetWidth)/2)
   theImage.style.top=Top+"px";
   theImage.style.left=Left+"px";
}
resizepict();
document.title="Afficher l'image : " + theImage.src;
document.onresize=resizepict;

-->
</script>
</body>
</html>

Merci, je ne m'attendais pas à ce que tu me donnes le code complet et corrigé ;) .

Aprés reflexion je comprends ton code mais je ne vois toujours pas pourquoi on ne peut pas utiliser directement

Code:

document.image.heigth

alors que dans une autre fonction j'utilise

Code:

document.image.src

et cela fonctionne.

Par contre l'image est redimensionnée mais elle n'occupe pas toute la hauteur utile de la page. Je pense que le probléme est là mais je ne vois pas ce que j'ai oublié :

Code:

size.offsetHeight+size.offsetTop

Voici un lien avec une image en 875x718 si tu veux essayer le code :

http://img117.imageshack.us/img117/871/testgj1.jpg
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 <html> <head> </head> <body> <img style="position: absolute; top:0px; left:0px; width:100%" src="testgj1.jpg" id="image" name="image" hspace="0" vspace="0"> <script type="text/javascript">  </script> </body> </html>