Ion-avatar no longer circle

Ionic Framework ionic-v3
1

Hi !

I have an ion-avatar and I fixed the size of the img at width: 12rem !important and same for the height but the result is not really a circle, do you know how Can i solve this problem please ?

2

You probably need to also change the height to 12rem so that the shape is a square. The border radius is applied with the assumption that the element will be a square (I assume the circle is created via border-radius:50%)

3

Thank for you answer ! I put width And height to 12rem !important… But the result looks like that :Image2

4

Looks like it’s inside a square container. You’ll need to also change the border radius of the container div.

5

I put border-radius on ion-avatar or img but that change nothing :frowning:

6 
<!-- html markup -->
<ion-avatar item-start>
    <img src="some-img.png">
</ion-avatar>

/* css -- see note below */
ion-avatar,
ion-avatar > img{
    border-radius:50%;
    height:12rem;
    width:12rem;
}

I don’t know offhand if these are the right selectors. You can use your browser web inspector to get the right classes if this doesn’t work.

5 Likes
7

I will try thanks man !

1 Like
8

that’s working thanks !