CODEWITHSUNDEEP
htmlcssionic-framework
AdminDev826
AdminDev826

Reputation: 330

How can I make the profile image view in Ionic framework?

I want to add circle view on my profile screen in my Ionic 2 project. Is there any simple way to do that or what tag can I use in Ionic framework ? Thank you.

Upvotes: 2

Views: 2477

Answers (2)

Mustafa Lokhandwala
Mustafa Lokhandwala

Reputation: 814

I have created a circle image view in my project so it's code is here,

profile.html

 <div class="bg-image">
  <ion-img src="data:image/*;base64,{{src}}" class="round-image" 
style="
  height: 150px !important;
  width: 150px !important;
  margin-top: 12%;
  background: none !important;
  background-color :none !important;" (click)="presentActionSheet()">
 </ion-img>
</div>

profile.scss

 .bg-image {
    background-color: #F7556D;
    height: 350px;
    width: 100%;
    text-align: center;
}

.round-image img{
    background-position: center center;
    background-size: contain;
    border-radius: 50%;
    border: 3px solid;
    border-color: rgb(255, 255, 255);
    height: 100%;
    width: 100%;
}

Here is both file and it looks like this enter image description here

Upvotes: 2

CHRIS LEE
CHRIS LEE

Reputation: 786

Use css below. If you want a circle that seems like they have same width and height lengt. so, it can be like width: 2vw;height:2vw; Circle width will depend upon the device width.

.image {
     height: 5vw; 
     width: 5vw; 
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 5px gray;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
} 

<div class="image"></div>

Upvotes: 2

Related Questions