Centrer une image de taille variable.

[Angelfire]

Bonjour,

Je suis en train de développer un petit script en javascript pour afficher une image dans sa taille réelle. En fait je redimensionne à la volée des images que j'uploade, je les affiche plutôt que les images originelles. Ensuite quand on passe le curseur sur les miniatures l'image s'affiche en taille réelle. Actuellement pour voir l'image en taille réelle pour pouvoir par exemple la télécharger, on clique dessus et on arrive sur une page où l'image s'affiche.

Je voudrais remplacer cette dernière étape par ce script pour que l'image s'affiche au premier plan, un peu le même principe que lightbox pour ceux qui connaissent.

Un exemple de page avec ces images : -http://www.fffury.com/FF7-Solution-1.html


Comme vous pouvez le constater ça marche nickel c'est centré comme il faut. Seulement j'ai fixé la largeur de la division...

Une partie de mon CSS :
left: 50%;
top: 50%;
margin-top: -146px;
margin-left: -240px;

Mais pour une largeur et hauteur de l'image inconnue, je ne sais pas comment faire...

 

[Dharius]

Salut,

En PHP, tu peux récupérer la taille d'une image avec getimagesize.

EXEMPLE :
$taille = getimagesize("http://www.example.com/image.gif");
$largeur = $taille[0];
$hauteur = $taille[1];

 

[YoyoS]

ou en javascript aussi surement j'imagine.

 

[Angelfire]

Hum je sais déjà tout ça, et je préfère ne pas utiliser PHP ou Javascript pour ce genre de chose. Ca me semble un peu lourd.

Toutefois j'ai une bonne expérience web et je ne sais même pas comment faire pour centre une image de largeur variable en CSS c'est fou :mrgreen: Il y a moyen de le faire ou non ?!?

Enfin si vraiment il y a pas moyen, je le ferai en javascript, je vais d'ailleurs le faire et attendre si jamais quelqu'un a une solution plus légère et plus "naturelle".

 

[YoyoS]

Bah ça veut rien dire variable, c'est jamais variable vu qu'une page web c'est fixe ... Et quand elle bouge après son chargement c'est forcément javascript. DOnc le meilleur moyen c'est de connaitre sa dimension après en javascript et de modifier les propriétés css en conséquence.

Tout ce que tu as à faire c'est récupérer la largeur, changer la propriété width de ta classe avec cette largeur et c'est fini.

Ou alors peut-être que ceci fonctionne sur une image

<img class="test" src.../>

.test {
margin-left:auto;
margin-right:auto;
}
Pour utiliser cette astuce il faut une taille de cadre fixe. Mais à tester sur ton image

 

[Angelfire]

Bah ça veut rien dire variable, c'est jamais variable vu qu'une page web c'est fixe ... Et quand elle bouge après son chargement c'est forcément javascript. DOnc le meilleur moyen c'est de connaitre sa dimension après en javascript et de modifier les propriétés css en conséquence.

Tout ce que tu as à faire c'est récupérer la largeur, changer la propriété width de ta classe avec cette largeur et c'est fini.

Ou alors peut-être que ceci fonctionne sur une image

<img class="test" src.../>

.test {
margin-left:auto;
margin-right:auto;
}
Pour utiliser cette astuce il faut une taille de cadre fixe. Mais à tester sur ton image

Oula j'ai déjà essayé environ 90% des balises CSS :mrgreen: Dont bien évidemment le margin : auto, le text-align, ect...

Je vais le faire en javascript, puisque j'ai rien trouvé sur le net pour le faire sans.

Bon j'ai réussi à créer un objet image à partir de l'URL de l'original, mais je n'arrive pas à centrer la division même avec la largeur de l'image...

 

[YoyoS]

Tiens cado, en une seule ligne de javascript avec jQuery
Je fais sa promo comme je l'ai découvert y a quelques jours lol. Je m'en passerai plus j'crois

(...)
	<style type="text/css" media="screen">
					.coucou { border:2px; width:900px; height:500px;  background-color: #00FFFF;}
					#mydiv {  margin-left:auto; margin-right:auto;  }					
			</style>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
	    <script type="text/javascript">
        $(document).ready(function() {
        	$("#mydiv").css("width",$("#monimage").width()+"px");
        });
    </script>

</head>
<body>
<div class="coucou">
<div id="mydiv"><img id="monimage" src="https://www.webrankinfo.com/images/wri/webrankinfo-logo.png" /></div>
</div>
</body>

Si tu veux voir le résultat avec javascript activé et désactivé, je t'en prie : -http://www.positeo.com/hehe.html

 

[Angelfire]

Bah j'ai finalement réussi à faire ce que je voulais, tout ça en javascript bien sûr.

Et comme je préfère ne pas utiliser de librairie et de code copié collé, ça tombe bien :mrgreen:
Pour voir le résultat : http://www.fffury.com/FF7CC-Magasins.html

Merci pour l'aide.