如何在 Ionic 框架中制作个人资料图像视图？答案

【问题标题】：How can I make the profile image view in Ionic framework?如何在 Ionic 框架中制作个人资料图像视图？
【发布时间】：2017-11-28 22:09:47
【问题描述】：

我想在 Ionic 2 项目的个人资料屏幕上添加圆形视图。有什么简单的方法可以做到这一点，或者我可以在 Ionic 框架 中使用什么标签？谢谢。

【问题讨论】：

此链接：stackoverflow.com/questions/39093892/…

标签： html css ionic-framework

【解决方案1】：

在下面使用 css。如果你想要一个看起来像它们具有相同宽度和高度长度的圆圈。所以，它可以像 width: 2vw;height: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>

【讨论】：

【解决方案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%;
}

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

【讨论】：