如何将图像作为离子项目的中心对齐

Question

我正在尝试将图像作为飞行员对准离子项目。

见下文。

ionic.page.html

   <ion-content padding>
      <ion-item class="item-profile">
      <img  src= "assets/image/learn/doctor/doctor.jpg" class="profilepic">
      <img src="assets/image/profile/samll-circle.png" class="addPhoto">
      </ion-item>
   </ion-content>

在上面，我试图将图像中心与离子项元素对齐。 我的意思是作为飞行员。 但是我也得到了一些。 请在下面检查我的CSS。

    .item-profile {
       border: 2px solid grey;
       border-style: dashed;
       border-radius: 50%;
       width: 160px;
       height: 160px;
       padding: 0px;
       display: flex;
       margin: 0 auto;
       overflow: hidden;

     .profilepic {
        width: 100%;
       height: 100%;
       position: relative;
       border-radius: 50%;
     }
   }

我有什么要求

我需要将图像设置为上述父元素（“ ion-item”），如下所示：

1. 图片应填写
2. 图片应该是完整的展示
3. 图片应在外圆内

Answer 1

没有图像很难说，但是我认为问题在于，您需要一起使用.profilepic打开和关闭整个.item-profile（.profilepic从父级获取规则）...应该分开。

.item-profile {
   border: 2px solid grey;
   border-style: dashed;
   border-radius: 50%;
   width: 160px;
   height: 160px;
   padding: 0px;
  display: flex;
  margin: 0 auto;
  overflow: hidden;
}

.profilepic {
    width: 100%;
   height: 100%;
   position: relative;
   border-radius: 50%;
 }

希望我能正确理解你。