How to overflow image inside a toolbar using Ionic?

Issue

I am trying to overflow the image inside the toolbar like these:

ion-header {
  background: var(--ion-color-primary);
  ion-toolbar {
    --padding-end: 30px;
    --padding-start: 30px;
    --min-height: 100px;
    ion-avatar {
      margin: 20px auto;
      height: 120px;
      width: 120px;
      img {
        margin-top: 60%;
        border: 3px solid var(--ion-color-secondary);
      }
    }
  }
}

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="secondary">
      <ion-button>
        <ion-icon slot="icon-only" size="large" name="exit"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-buttons slot="primary">
      <ion-button>
        <ion-icon slot="icon-only" size="large" name="create"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-avatar>
      <img src="https://www.abc.net.au/news/image/8314104-1x1-940x940.jpg">
    </ion-avatar>
  </ion-toolbar>
</ion-header>

But I get a result like these, with the avatar cropped:

How can I achieve the same result but without cropping the image?

This is the result I want to get:

Thanks in advance.

Solution

Try this:

<ion-header>
  <ion-toolbar color="primary">
    <ion-button slot="start">
      <ion-icon slot="icon-only" size="large" name="exit"></ion-icon>
    </ion-button>
    <ion-button slot="end">
      <ion-icon slot="icon-only" size="large" name="create"></ion-icon>
    </ion-button>
    <ion-avatar>
      <img src="https://www.abc.net.au/news/image/8314104-1x1-940x940.jpg" />
    </ion-avatar>
  </ion-toolbar>
</ion-header>

SCSS:

ion-header {
  background: var(--ion-color-primary);
  ion-avatar {
    margin: 20px auto;
    height: 120px;
    width: 120px;
  }
}

You will get this output:

I recommend you to go through the Ionic components as well: https://ionicframework.com/docs/components

Answered By - Volvo