如何將圖像作為離子項目的中心對齊

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

希望我能正確理解你。