如何在Ionic框架中创建配置文件图像视图？

Question

我想在我的Ionic 2项目的个人资料屏幕上添加圈子视图。 有没有简单的方法可以在离子框架中使用哪种标签？ 谢谢。

Answer 1

使用下面的css。如果你想要一个看似宽度和高度相同的圆圈。所以，它可以像宽度：2vw;高度：2vw;圆宽将取决于设备宽度。

.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;
} 

<div class="image"></div>

Answer 2

我在项目中创建了一个圆形图像视图，所以它的代码就在这里，

<强> profile.html

 <div class="bg-image">
  <ion-img src="data:image/*;base64,{{src}}" class="round-image" 
style="
  height: 150px !important;
  width: 150px !important;
  margin-top: 12%;
  background: none !important;
  background-color :none !important;" (click)="presentActionSheet()">
 </ion-img>
</div>

<强> profile.scss

 .bg-image {
    background-color: #F7556D;
    height: 350px;
    width: 100%;
    text-align: center;
}

.round-image img{
    background-position: center center;
    background-size: contain;
    border-radius: 50%;
    border: 3px solid;
    border-color: rgb(255, 255, 255);
    height: 100%;
    width: 100%;
}

这是两个文件，它看起来像这样