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
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.