如何将图像作为中心对齐到离子项目答案

【问题标题】：How to align the image as center to the ionic item如何将图像作为中心对齐到离子项目
【发布时间】：2019-09-19 02:15:05
【问题描述】：

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

见下文。

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'）为

图像应该被填充
图片应该是完整的展示
图片应该在外圈内

【问题讨论】：

添加更多细节，例如您想要什么样的外观

标签： css angular cordova ionic3

【解决方案1】：

没有图像很难说，但我认为问题在于您将整个 .item-profile 与 .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%;
 }

希望我理解正确。

【讨论】：