Html 如何在Ionic framework中创建纵断面图像视图？

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

---

谢谢。

使用下面的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>

---

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

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>

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