ionic 3 - show rounded image

Question

I'm trying to set a round image at the top of a page (like a profile page). The image is rectangular and about 300x200. I've tried these ways:

1) Using the Ion-Avatar Tag

2) Using Ion-Image tag, setting the border radius in the scss

None of these methods worked. The image just kept showing squared (and eventually shrinked) inside a grey circle:

Any suggestions?

Solution 1

you can try with 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" />

 

Solution 2

In ionic 3, you can do this...

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

That simple

In some cases, you may need to set the img height and width to the same value manually. But this is the standard ionic 3 method.

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