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”），

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

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

希望我能正确理解你。

如何将图像中心对准离子项目

1 个答案: