Как выровнять изображение как центр к ионному элементу

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

Трудно сказать без изображений, но я думаю, что проблема в том, что вы открываете и закрываете весь .item-профиль вместе с .profilepic (.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%;
 }

Надеюсь, я вас правильно понял.