web-dev-qa-db-fra.com

ionic 3 - afficher l'image arrondie

J'essaie de définir une image ronde en haut d'une page (comme une page de profil). L'image est rectangulaire et d'environ 300x200. J'ai essayé ces façons:

1) Utilisation de la balise Ion-Avatar

2) À l'aide de la balise Ion-Image, définissez le rayon de la bordure dans le scss

Aucune de ces méthodes n'a fonctionné. L'image n'a cessé de montrer au carré (et a finalement rétréci) à l'intérieur d'un cercle gris:

enter image description here

Aucune suggestion?

htmlcssionic3circleimage
5
Usr

vous pouvez essayer avec css

.image {
     height: 5vw; 
     width: 5vw; 
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 5px gray;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}

.circle-pic{
    width:50px;
    height:50px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
<div class="image">
</div>

<p>or if you want only image try this</p>

 <img class="circle-pic" 
 src="http://autokadabra.ru/system/uploads/users/18/18340/small.png?1318432918" />
8
Udhay Titus

Dans ionic 3, vous pouvez le faire ...

<ion-avatar>
      <img src="">
</ion-avatar>

C'est simple

Dans certains cas, vous devrez peut-être définir manuellement la hauteur et la largeur img sur la même valeur. Mais c'est la méthode standard ionic 3.

https://ionicframework.com/docs/components/#avatar-list

3
Patrick Odum