Centrer une image de taille variable.

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par Angelfire, 8 Mars 2009.

  1. Angelfire
    Angelfire Nouveau WRInaute
    Inscrit:
    2 Mars 2009
    Messages:
    42
    J'aime reçus:
    0
    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...
     
  2. Dharius
    Dharius WRInaute impliqué
    Inscrit:
    6 Avril 2005
    Messages:
    741
    J'aime reçus:
    0
    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];
     
  3. YoyoS
    YoyoS WRInaute accro
    Inscrit:
    14 Septembre 2006
    Messages:
    3 226
    J'aime reçus:
    0
    ou en javascript aussi surement j'imagine.
     
  4. Angelfire
    Angelfire Nouveau WRInaute
    Inscrit:
    2 Mars 2009
    Messages:
    42
    J'aime reçus:
    0
    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".
     
  5. YoyoS
    YoyoS WRInaute accro
    Inscrit:
    14 Septembre 2006
    Messages:
    3 226
    J'aime reçus:
    0
    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 ;)
     
  6. Angelfire
    Angelfire Nouveau WRInaute
    Inscrit:
    2 Mars 2009
    Messages:
    42
    J'aime reçus:
    0
    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...
     
  7. YoyoS
    YoyoS WRInaute accro
    Inscrit:
    14 Septembre 2006
    Messages:
    3 226
    J'aime reçus:
    0
    Tiens cado, en une seule ligne de javascript avec jQuery :D
    Je fais sa promo comme je l'ai découvert y a quelques jours lol. Je m'en passerai plus j'crois :p

    Code:
    (...)
    	<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
     
  8. Angelfire
    Angelfire Nouveau WRInaute
    Inscrit:
    2 Mars 2009
    Messages:
    42
    J'aime reçus:
    0
    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.
     
Chargement...
Similar Threads - Centrer image taille Forum Date
grande image centrer verticalement dans DIV avec largeur variable de l'ecran Développement d'un site Web ou d'une appli mobile 28 Juin 2022
Centrer image thème naturespace Développement d'un site Web ou d'une appli mobile 19 Mars 2015
Centrer une image en height Développement d'un site Web ou d'une appli mobile 27 Février 2015
Centrer une image horizontalement sur un div Développement d'un site Web ou d'une appli mobile 25 Septembre 2012
Centrer une image en CSS Développement d'un site Web ou d'une appli mobile 11 Novembre 2008
Centrer une image de fond dans un tableau sans la répétée Développement d'un site Web ou d'une appli mobile 29 Novembre 2006
Balise Canonical pour "concentrer le jus" SEO? Problèmes de référencement spécifiques à vos sites 18 Juin 2015
Centrer mon site Demandes d'avis et de conseils sur vos sites 26 Novembre 2014
peut on oublier google et se concentrer sur bing et yahoo? Débuter en référencement 7 Février 2013
Centrer verticalement un texte (CSS) Développement d'un site Web ou d'une appli mobile 16 Février 2012
centrer menu horizontal deroulant Développement d'un site Web ou d'une appli mobile 28 Juin 2011
[css] Comment centrer un bloc css? Développement d'un site Web ou d'une appli mobile 25 Août 2010
[RESOLU] jQuery : centrer par rapport à la taille du navigateur Développement d'un site Web ou d'une appli mobile 25 Août 2010
Centrer un site en css????? Développement d'un site Web ou d'une appli mobile 14 Mars 2009
Centrer le site... Développement d'un site Web ou d'une appli mobile 10 Novembre 2008
Centrer newsletter Demandes d'avis et de conseils sur vos sites 7 Octobre 2008
pas moyen de centrer mon site Développement d'un site Web ou d'une appli mobile 27 Juin 2008
CSS : centrer un div Développement d'un site Web ou d'une appli mobile 6 Mai 2008
Centrer une page ? Développement d'un site Web ou d'une appli mobile 29 Février 2008
Pour centrer mon tableau ? Développement d'un site Web ou d'une appli mobile 17 Janvier 2008