离子3 - 显示圆形图像

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?

Answer 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" /> 

Answer 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