Comment centrer verticalement une image aléatoire ?

Version imprimable

22/11/2007, 11h29
Gunner4902

Comment centrer verticalement une image aléatoire ?

Bonjour,

Je cherche à centrer verticalement sur toute la hauteur de ma fenêtre une image.

Déjà que CSS est très limite sur cette pratique (comme s’il ne pouvait exister une propriété comme text-align:center qui lui gère parfairement l’alignement horizontal… d’ailleurs pourquoi text et pas inline-align ?), je ne peux pas utiliser la technique du
50% en positionnement absolu + marge de -50% de la hauteur de l’image car l’image est aléatoire et à chaque fois de taille différente…

J’ai bien essayé de mettre un tableau en place pour faire un valign (bah oui, à force de tout compliquer ce qui pourrait etre simple, le CSS avoue ses limites je trouve…), reste que celà n’est pas géré parfaitement et qu’il me faut mettre un

Code:

height:nombre de pixel de la hauteur de la page

pour que ça soit aligné parfaitement…

Or je voudrais un truc finallement très simple : aligner tout betement une image sans tenir compte de ses pixels de hauteur sur 100% de l’écran affiché (donc si je fais F11 (sous Windows) je devrais garder l’image centrée…)

Merci de votre aide.
22/11/2007, 11h52
BnA

Images de tailles différentes = récup. de la taille afin d'obtenir un alignement précis = Forum Javascript
22/11/2007, 14h20
Gunner4902
Ok, je veux bien passer par le JavaScript pour récupérer la hauteur de l’image, mais le JS va donner une valeur dynamique… donc comment mettre cette valeur dynamique dans le code CSS ?
Code:

1 2 3 4 5 6 7 #global { position:absolute; top: 50%; height: 400px; /* valeur dynamique */ margin-top: -200px; /* moitié de height */ border: 1px solid #000; }

bonjour,
Essayer se code javascript.

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
31
32
33
34
	var fWidth;
	var fHeight;
	//For old IE browsers
	if(document.all)
	{
		fWidth = document.body.clientWidth;
		fHeight = document.body.clientHeight;
	}
	//For DOM1 browsers
	else if(document.getElementById &&!document.all)
	{
		fWidth = innerWidth;
		fHeight = innerHeight;
	}
	else if(document.getElementById)
	{
		fWidth = innerWidth;
		fHeight = innerHeight;
	}
	//For Opera
	else if (is.op)
	{
		fWidth = innerWidth;
		fHeight = innerHeight;
	}
	//For old Netscape
	else if (document.layers)
	{
		fWidth = window.innerWidth;
		fHeight = window.innerHeight;
	}
 
document.getElementById('id_de_votre_element').style.left=fWidth/2;
document.getElementById('id_de_votre_element').style.top=fHeight/2 ;

Merci RootDaoud. :)
Pourtant celà ne fonctionne pas…

Je récapitule pour voir d’où peut venir mon erreur :

Dans le Body, le code JS que tu m’as donné :

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
31
32
33
34
35
36
37
38
<script type="text/javascript">
		<!--
		var fWidth;
	var fHeight;
	//For old IE browsers
	if(document.all)
	{
		fWidth = document.body.clientWidth;
		fHeight = document.body.clientHeight;
	}
	//For DOM1 browsers
	else if(document.getElementById &&!document.all)
	{
		fWidth = innerWidth;
		fHeight = innerHeight;
	}
	else if(document.getElementById)
	{
		fWidth = innerWidth;
		fHeight = innerHeight;
	}
	//For Opera
	else if (is.op)
	{
		fWidth = innerWidth;
		fHeight = innerHeight;
	}
	//For old Netscape
	else if (document.layers)
	{
		fWidth = window.innerWidth;
		fHeight = window.innerHeight;
	}
 
document.getElementById('id_de_votre_element').style.left=fWidth/2;
document.getElementById('id_de_votre_element').style.top=fHeight/2 ;
		//-->
	</script>

ensuite le script de l’image :

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
<div id="image2">
<?php
	$imgpath = "dossier/";
	if (is_dir($imgpath))
	{
	if ($condir = opendir($imgpath))
	{
	$i = 0;
	while (($curfile = readdir($condir)) != false)
	{
	  $extension = "";
$extension = preg_replace("/.+\.(.{3,4})/", "$1", $curfile);		  if ($extension == "jpeg" || $extension == "jpg")
	  {
	  $i++;
	  $images{$i} = $curfile;
	}	
	}					
           {
	  $i = rand(1, $i);
	  $image = $images{$i};	
             echo "<img src=\"";		
             echo $imgpath;
	  echo "".$image."\" alt=\"\" />";
	}							}
	}
	?>
</div>

malgré celà, l’image n’est pas centrée et la console d’erreur d’Opera me précise :

Citation:

JavaScript - 127.0.0.1/random.php
Inline script thread
Error:
Error:
name: TypeError
message: Statement on line 28: Could not convert undefined or null to object
Backtrace:
Line 28 of inline#3 script in 127.0.0.1/random.php
(document.getElementById("image2")).style.top = fHeight / 2;

Qu’est-ce qui ne va pas ?

Merci de votre aide

J’ai tenté de simplifier.

Sachant que je sais mettre l’image à 50% en top et en left en CSS, je souhaites juste faire :

* -50% de la hauteur de l’image en margin-height
* -50% de la largeur de l’image en margin-left

J’ai essayé ceci :
Code:

1 2 3 4 5 6 7 <script type="text/javascript"> var fWidth = img.width; var fHeight = img.height; var img = document.images; document.getElementById('image').style.marginLeft=-fWidth/2; document.getElementById('image').style.marginTop=-fHeight/2; </script>
Mais ça ne fonctionne pas…
Si quelqu’un a une idée, je suis preneur, je tourne en rond depuis plus de quinze jours sur ce centrage vertical dynamique.

J’ai pas mal avancé cet après-midi et je sens que je touche au but, mais il me manque un petit coupe de pouce…

HTML

Code:

<img src="monimage.jpg" name="name_image\" alt="" />

JAVASCRIPT
Code:

1 2 3 4 5 6 7 8 <script type="text/javascript"> 1. document.getElementById('id_image').style.position="absolute"; 2. document.getElementById('id_image').style.top="50%"; 3. document.getElementById('id_image').style.left="50%"; 4. document.getElementById('id_image').style.marginLeft="-"document.name_image.height"/2"; 5. document.getElementById('id_image').style.marginTop="-"document.name_image.width"/2"; 6. document.write(document.name_image.width + " × " + . document.name_image.height + " pixels"); </script>
Les lignes 1, 2, 3 et 6 fonctionnent normalement :D
Par contre j’aurai besoin d’un coup de main pour les lignes 4 et 5… l’idée c’est de déclarer par exemple "-(120/2)" sous entendu - 60 pixels.

Merci de votre aide

Bonjour,

Code:

1
2
4. document.getElementById('id_image').style.marginLeft=(document.getElementById('name_image').style.height*-1/2)+"px";		
5. document.getElementById('id_image').style.marginTop=(document.getElementById('name_image').style.width*-1/2)+"px";	;

:?

A+

Merci E.Bzz mais en appliquant ton code, j’ai l’image qui commence toujours à 50% top et left, par contre elle l’image est diminuée de 50% en width et height…

Je l’ai donc modifié :
Code:

1 2 3 4 5 6 7 8 <script type="text/javascript"> document.getElementById('id_image').style.position="absolute"; document.getElementById('id_image').style.top="50%"; document.getElementById('id_image').style.left="50%"; document.getElementById('id_image').style.marginLeft=(document.name_image.width*-1/2)+"px"; document.getElementById('id_image').style.marginTop=(document.name_image.height*-1/2)+"px"; document.write(document.name_image.width/2 + " × " + document.name_image.height/2 + " pixels"); </script>
L’image est désormais parfaitement centrée, quelque soit la résolution ! :)

Merci de m’avoir mis sur la piste :D

23/11/2007, 17h58
E.Bzz

Citation:

Envoyé par Gunner4902

Merci E.Bzz mais en appliquant ton code, j’ai l’image qui commence toujours à 50% top et left, par contre elle l’image est diminuée de 50% en width et height…

J'avoue avoir plus regardé la syntaxe que le résultat attendu :oops:

A+
23/11/2007, 18h05
Gunner4902

Pas grave ;)
Je travaille avec la console d’erreur d’Opera car je débute en JavaScript. Je pense que la syntaxe finale doit être bonne. Ce qui me manquait était donc la logique syntaxique pour déclarer

Code:

*-1/2

J’avoue d’ailleurs que ça ne me parait pas très logique même maintenant :oops:.
23/11/2007, 18h13
E.Bzz

Citation:

Envoyé par Gunner4902

J’avoue d’ailleurs que ça ne me parait pas très logique même maintenant :oops:.

Code:

(-1*(document.name_image.height/2))

Ca te paraitrait peut-être plus logique comme ça, mais c'est la même chose ;)
EDIT : je voulais juste limiter le nb de parenthèses ...

A+
25/11/2007, 11h09
Gunner4902

Oui je comprends mieux ainsi.
Merci