ionic 3 - 显示圆形图像答案

【问题标题】：ionic 3 - show rounded imageionic 3 - 显示圆形图像
【发布时间】：2017-06-18 09:49:16
【问题描述】：

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

1) 使用 Ion-Avatar 标签

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

这些方法都不起作用。图像只是在一个灰色圆圈内一直显示为正方形（并最终缩小）：

有什么建议吗？

【问题讨论】：

标签： html css ionic3 circleimage

【解决方案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" />

【讨论】：

【解决方案2】：

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

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

就这么简单

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

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

【讨论】：