ionic 3 - 显示圆形图像

Question

我正在尝试在页面（如个人资料页面）顶部设置圆形图像。图片是矩形的，大约 300x200。我试过这些方法：

1) 使用 Ion-Avatar 标签

2) 使用Ion-Image标签，在scss中设置边框半径

None 这些方法奏效了。图像一直在灰色圆圈内显示方形（并最终缩小）：

有什么建议吗？

Answer 1

你可以试试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

在 ionic 3 中，你可以这样做...

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

就这么简单

在某些情况下，您可能需要手动将img 的高度和宽度设置为相同的值。但这是标准的离子3方法。

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

ionic 3 - 显示圆形图像

ionic 3 - show rounded image

html

css

circleimage

ionic3