How to set the avatar correctly on the bottom|center of the image?

Ionic Framework
1

Hi everyone,

I’m trying to set an “ion-avatar” as i said in the title on Ionic 4, but the problem is cannot find the css to do that, does anyone know the trick to do that? The following image is what i did, but i want the avatar front of the image and at the bottom|center

problem

Thank you so much

Regards

2

do you mean set avatar on image?

3

Try this css and html :

<ion-footer>
<div class=“bottom_avtar”>
<ion-avatar>
<img src=“https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y”>
</ion-avatar>
</div>
</ion-footer>

.bottom_avtar {
display: flex;
align-items: center;
justify-content: center;
padding: 10px 15px;
background: white;
}

2 Likes
4

Hello,

Add this in page.html file

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <div class="container">
    <ion-img src="../../assets/img_avatar.png" alt="Avatar" class="image"></ion-img>
    <div class="overlay">
      <ion-avatar>
        <img src="../../assets/feature_sms_reader_icon.png" alt="Avatar" class="image">
      </ion-avatar>
    </div>
  </div>
</ion-content>

add this scss

.container {
  position: relative;
}
.image {
  display: block;
  width: 100%;
  height: auto;
}
.overlay {
  position: absolute;
  bottom: 0px;
  color: #f1f1f1;
  width: 100%;
  transition: 0.5s ease;
  opacity: 0;
  color: white;
  font-size: 20px;
  padding: 20px 0 0 0;
  text-align: center;
  opacity: 1;
  left: 32%;
  top: 77%;
}
ion-card {
  width: auto;
  height: 500px;
}
ion-avatar {
  width: auto;
  height: auto;

  img {
    width: 36%;
  }
}

localhost_8100_home
localhost_8100_home.png800×1546 87 KB

add center image height as your requirement in this class .overlay { top:77%;}
cheers :slight_smile:

1 Like
5

WOW cool! better than i expected! please can you tell me why a div with container? and for the next time… where should i find this solutions? because its not for Ionic because i didnt find it

6

This is ionic v4, and we can use div with a container, you can find other things on w3school with example. and this is what you trying?

1 Like
7

Hey buddy i’m doing it, but the problem is the avatar is more down i expected and i have more stuff to show and it doesnt fit well with this code :S I have text and something else

UPDATED:

PROBLEM2

8

Thanks but i need a background of a pic, not white, thanks anyway

9

customize css as your requirements or send your design code with css.

10 
<ion-content padding>

  <ion-card class="ion-text-center">

        
    <div class="container">
      <ion-img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Karl_Brullov_-_The_Last_Day_of_Pompeii_-_Google_Art_Project.jpg/800px-Karl_Brullov_-_The_Last_Day_of_Pompeii_-_Google_Art_Project.jpg" alt="Avatar" class="image"></ion-img>
      <div class="overlay">
        <ion-avatar>
            <img src="https://cdn0.iconfinder.com/data/icons/hell/500/satan-512.png">
          </ion-avatar>
        </div>
        

      </div>
      <div></div>
      <p class="bold">texttexttexttext</p>
      <ion-icon (click)="textmethod()" name="logo"></ion-icon>
      <a href="mailto:mailmail">
        <ion-icon name="mail"></ion-icon>
      </a>

      <ion-text color="warning" (click)="text()">
        <h5>textextetxtetxtetxtetxt!</h5>
      </ion-text>
  </ion-card>
</ion-content>

.profile {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    padding-top: 24px;
    justify-content: center;
    align-items: center;
}

.bold {
    font-weight: bold;
}

.container {
    position: relative;
  }
  .image {
    display: block;
    width: 100%;
    height: auto;
  }
  .overlay {
    position: absolute;
    bottom: 0px;
    color: #f1f1f1;
    width: 100%;
    transition: 0.5s ease;
    opacity: 0;
    color: white;
    font-size: 20px;
    padding: 20px 0 0 0;
    text-align: center;
    opacity: 1;
    left: 32%;
    top: 77%;
  }
  ion-card {
    width: auto;
    height: 500px;
  }
  ion-avatar {
    width: auto;
    height: auto;  
    img {
      width: 30%;
    }
  }
11

but the problem thats a mess…

12

give padding in text

13

inside container i have to set ion-text { somepadding } right?

14 
<p class="bold">texttexttexttext</p>
      <ion-icon (click)="textmethod()" name="logo"></ion-icon>
      <a href="mailto:mailmail">
        <ion-icon name="mail"></ion-icon>
      </a>

      <ion-text color="warning" (click)="text()">
        <h5>textextetxtetxtetxtetxt!</h5>
      </ion-text>

put this code in div and add class than in class add padding-top.

1 Like
15

Thank you so much, but it doesnt work… its a mess

16

Thank you so much i fixed it a little bit (left percentatge was 38% and i added the padding of the div with text ;))

1 Like