Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1682 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Récupérer une largeur d'image ?

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Récupérer une largeur d'image ?

n°1962099
toum_toum
Vivons masqués
Posté le 01-02-2010 à 20:37:54  profilanswer
 

Salut,
 
Je voudrais savoir s'il y a une possibilité de créer une "class" capable de déterminer la moitié de la largeur de n'importe quelle image (à partir de ses données width, bien sûr...)
 
?
 
 
 
 
Edit : je me pose cette question pour pouvoir centrer un élément inline (une image) à l'intérieur d'un bloc...
 
 
En passant par ce moyen ci :
 
width: Xpx;   /* -------> largeur de l'image  */
left: 50%;   /* -------> position par rapport à l'écran  */
margin-left: -(X/2)px;    /* ----> reculer de la moitié  */
 
 
Comme j'ai une 10aine d'image par pages, autant ne pas avoir à calculer et taper la largeur de chacune... Quelle galère :o  
 


Message édité par toum_toum le 01-02-2010 à 21:15:08

---------------
“Et maintenant, la météo" - Soloviev 2022-2024
mood
Publicité
Posté le 01-02-2010 à 20:37:54  profilanswer
 

n°1962108
gatsu35
Blablaté par Harko
Posté le 01-02-2010 à 21:17:46  profilanswer
 

heu pourquoi pas mettre un text-align:center sur le bloc ?

 

avant que tu complète ta question je t'avais codé ceci :

Code :
  1. function getImageSize(imgSrc,callback) {
  2.     var div = document.createElement('div');
  3.     div.style.position = 'absolute';
  4.     div.style.height = '1px';
  5.     div.style.width = '1px';
  6.     div.style.overflow = 'hidden';
  7.     var img = document.createElement('img');
  8.     img.onload = function() {
  9.         callback({
  10.             w:this.width,
  11.             h:this.height
  12.         });
  13.         document.body.removeChild(div);
  14.     }
  15.     img.onerror = function() {
  16.         alert("l'url de l'image n'est pas bonne" );
  17.     }
  18.     img.src = imgSrc;
  19.     div.appendChild(img);
  20.     document.body.appendChild(div);
  21. }
  22.  
  23.  
  24. getImageSize('http://photocompetition.hispeed.ch/original/420361/concours_chien/chien_kutya_dog.jpg', function(size) {
  25.     alert(size.w+'x'+size.h);
  26. });


ca te retourne la taille d'une image sur une callback.


Message édité par gatsu35 le 01-02-2010 à 21:18:24

---------------
Blablaté par Harko
n°1962111
toum_toum
Vivons masqués
Posté le 01-02-2010 à 21:44:40  profilanswer
 

Le text-align:center peut-il s'appliquer sur une image ?
J'ai testé cette solution tt à l'heure, parmi 5 ou 6 autres, et sans résultat...
 
 
 
Edit :
 
 
- Dans mon css j'ai créé :
 
.centrage {
 text-align: center;
}
 
 
- Puis dans mon html, sur une image (n'importe laquelle) au milieu d'un paragraphe, je tape :
 
<p><img src="images/monimage.jpg" width="xxx" height="yy" class="centrage" /></p>
 
 
Mais nada....

Message cité 1 fois
Message édité par toum_toum le 01-02-2010 à 22:15:42

---------------
“Et maintenant, la météo" - Soloviev 2022-2024
n°1962113
toum_toum
Vivons masqués
Posté le 01-02-2010 à 21:46:30  profilanswer
 

Sinon merci beaucoup pour le code, je vais analyser ça dans la matinée...  :jap:  
 
 
Bien que ça me semble un "gros truc" quand même...  :D


---------------
“Et maintenant, la météo" - Soloviev 2022-2024
n°1962195
gatsu35
Blablaté par Harko
Posté le 02-02-2010 à 09:51:35  profilanswer
 

toum_toum a écrit :

Le text-align:center peut-il s'appliquer sur une image ?
J'ai testé cette solution tt à l'heure, parmi 5 ou 6 autres, et sans résultat...
 
 
 
Edit :
 
 
- Dans mon css j'ai créé :
 
.centrage {
 text-align: center;
}
 
 
- Puis dans mon html, sur une image (n'importe laquelle) au milieu d'un paragraphe, je tape :
 
<p><img src="images/monimage.jpg" width="xxx" height="yy" class="centrage" /></p>
 
 
Mais nada....


 
MAIS NANNNNN
 sur l'élément parent :o
si ton image est bien un élément inline c'est sur l'élément parent qu'il faut le mettre :o
 

Code :
  1. .mondiv {text-align:center;}


 

Code :
  1. <div class="mondiv">
  2. <p><img src="images/monimage.jpg"  /></p>
  3. <p><img src="images/monimage.jpg"  /></p>
  4. <p><img src="images/monimage.jpg"  /></p>
  5. <p><img src="images/monimage.jpg"  /></p>
  6. <p><img src="images/monimage.jpg"  /></p>
  7. <p><img src="images/monimage.jpg"  /></p>
  8. </div>



---------------
Blablaté par Harko
n°1962295
toum_toum
Vivons masqués
Posté le 02-02-2010 à 14:34:00  profilanswer
 

gatsu35 a écrit :


 
MAIS NANNNNN
 sur l'élément parent :o
si ton image est bien un élément inline c'est sur l'élément parent qu'il faut le mettre :o
 


 
Mais ouii [:mur]  
 

Spoiler :

Merci :jap:


 
 
PS :  
 
- Ici c'est <p> l'élément parent de <img>, <p> étant lui-même enfant de la <div id="maregion"> : j'avais zappé le <p> en fait ! Et comme je n'allais pas mettre ma règle sur ma région, j'étais allé directement par erreur sur mon <img>
 
- Cette règle de paternité napplique parce que text-align s'applique aux élément de type inline ? C'est bien ça ?
 


---------------
“Et maintenant, la météo" - Soloviev 2022-2024
n°1962296
gatsu35
Blablaté par Harko
Posté le 02-02-2010 à 14:38:31  profilanswer
 

text-align est de type inherit, les enfants auront ce style (sauf si tu redeclare autre chose).
 
mais evidement c'est sur les éléments inline que l'effet du text-align sera appliqué


---------------
Blablaté par Harko
n°1962301
toum_toum
Vivons masqués
Posté le 02-02-2010 à 14:43:49  profilanswer
 


Ok... "type inherit", c'est noté.
 
Merci :jap:


---------------
“Et maintenant, la météo" - Soloviev 2022-2024

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Récupérer une largeur d'image ?

 

Sujets relatifs
récupérer les variables PHP dans un symbole flash (AS 2)[annulé/résolu]soucis onMouseOver et onMouseOut sur lien + image
Recuperer header d'une image rapidementRécupérer un fichier indépendamment de la casse de son extension
afficher plusieur image dans un sprite en as3Recuperer valeur textbox pour connexion à une base Oracle
remplacer ou masquer une partie ciblé d une image avec jQueryRécupérer un int en dehors de la fonction.
équivalent à un input type=file, pour récupérer le chemin d'un dossierRécupérer largeur et hauteur d'une image (movieclip)
Plus de sujets relatifs à : Récupérer une largeur d'image ?


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR