[Angular 5] Récupérer la taille d'une image
Bonjour,
j'affiche une liste d'image avec une boucle, mon but est d'afficher le prix,
pour le moment le prix se situe à coté de l'image (p.prix):
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
|
<div id="produit" *ngFor="let p of produit,let i = index">
<img [src]="p.img" (mouseover)=" fctMouseOver($event,this)"
(mouseout)="fctMouseOut($event)" data-over="">
<p class="prix" >{{p.prix}} Euro(s)</p>
</div>
<style>
#prix{
}
#produit {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
#produit img {
float: left;
border-radius: 50%;
border: solid 1em #222222;
margin: 2em;
display: block;
cursor: pointer;
}
</style> |
il y a t'il une façon de faire avec angular pour récupérer la taille de l'image.
Si je peux récupérer la taille de l'image affiché je pourrais avec le css center le prix au millieux de l'image avec les positions relatives.
pensez vous que le "this" en paramètre "fctMouseOver($event,this)" possède dans son prototype sa taille ?
Pour arriver à le faire faut t'il passer par le décorateur d'attribut ?
Pour le moment voici ce que j'ai testé:
Code:
1
2
3
4
5
6
7
8
9
10
11
|
<div id="produit" *ngFor="let p of produit,let i = index">
<img [src]="p.img" (mouseover)=" fctMouseOver($event,this)"
(mouseout)="fctMouseOut($event)" data-over="">
<p [ngStyle]="
{'position':'relative' ,
'right':getRelativeDroite(),
'top':getRelativeBas()
}
">{{p.prix}} Euro(s)</p>
</div> |
et voici les méthode qui sont dans mon composant
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
getRelativeDroite(){
console.log( "taile :: ",this.el.nativeElement.offsetWidth/2);
let decaleDroite = this.el.nativeElement.offsetWidth/2;
return decaleDroite+"px";
}
getRelativeBas(){
console.log( "taile :: ",this.el.nativeElement.offsetHeight);
return 200+"px";
} |
j'ai réussi à center en horizontal, mais en vertical je n'ai pas réussi à prendre la taille vertical de l'image
merci d'avance de vos réponse :)
