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
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.