html - ionic 3 - 显示圆形图像

Question

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

1) 使用 Ion-Avatar 标签

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

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

有什么建议么？

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