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

Question

I am trying to align the image as an aviator to the ionic item.

See below.

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>

In the above, I am trying to align the image center to the ionic item element. I mean as an aviator. But I am getting some same. Please check my CSS below.

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

What is my requirement,

I need to set the image to the above parent element ('ion-item') as

1. image should be fill
2. image should be a full showcase
3. image should be inside the outer circle

Answer 1

It's difficult to say without images, but I think the problem is that you open and close the whole .item-profile with .profilepic together (.profilepic takes rules from parent)... It should be separated.

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

Hope I understood you correctly.