Tips for overflowing an image within an Ionic toolbar

I am attempting to adjust the image overflow within the toolbar using the following code:

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>

However, I am encountering an issue where the avatar image is cropped. Here is a visual of the problem:

https://i.sstatic.net/RnTNM.png

Is there a way to achieve the desired result without cropping the image? This is the desired outcome:

https://i.sstatic.net/J4AMV.png

Appreciate any assistance provided.

htmlcssangularionic-frameworksass

Answer №1

Give this a try:

<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.xyz.com/image.jpg" />
    </ion-avatar>
  </ion-toolbar>
</ion-header>

SCSS to style it:

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

This will result in the following output:

https://i.sstatic.net/qfXdB.png

I suggest exploring the Ionic components further: https://ionicframework.com/docs/components

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Which is more beneficial: incorporating a ready-made rule for every CSS style or crafting your own rule (OOCSS)?

Learning about Nicole Sullivan's concept of Object-Oriented CSS (OOCSS), I discovered the idea of using pre-existing basic building blocks as classes and then customizing them to suit individual needs rather than starting from scratch each time. The O ...

csscss-selectorsoocss

Angular 17 isn't notifying child component of signal changes

In the statistics module, I have a signal that specifies the type of charts to display and this signal is updated through a radio button group. The signal: typeSignal = signal<string>('OIA') The radio buttons for setting the : <div clas ...

angulartypescriptangular17

How can I display the value of a variable within an Angular 4 component directly from the console?

In my Angular 4 component, I store a simple key in a variable. However, I am aware that when the app is closed, all values within the variable are erased. Here is an example of this: export class LoginComponent implements OnInit { data : any; const ...

htmlangularangular-componentsbrowser-console

Creating static directories and sub-directories simultaneously with express.js

I have a `views` directory that I made static by using `app.use(express.static('views'))`. The views directory consists of subfolders as listed below- views |-homepage/ | |-homepage.ejs | |-homepage.css | |-homepage.js | |-partials/ | ...

cssnode.jsexpressejs

What can be done to stop the Datepicker from exiting the Dialog box and causing it to malfunction?

While creating a form inside a dialog box, I encountered an issue with the date picker functionality. Whenever I try to select a date, it disappears and breaks, rendering the last days of the calendar inaccessible. You can view an example of this problem i ...

javascripthtmlcssreactjsmaterial-ui

Failure to link style sheet to document

Experiencing some difficulties with a seemingly simple task that I can't figure out. When I check my code in the browser, none of my styles are being applied to the HTML elements. The style sheet is located in the same folder as the main document, and ...

htmlcss

Creating a cutting-edge mobile application using Ionic for the frontend and Django for the backend development

I'm in the process of creating a mobile application that utilizes Ionic (AngularJS) for the frontend and Django for the backend. I'm curious to find out if it's feasible to leverage Django to provide data as a JSON web API that my app can ac ...

angularjsdjangoionic-framework

What is the best way to save a jQuery or JavaScript variable into a JSON file?

Is there a way to save a jquery variable in a json file? I have the following: var image='/test/test.png'; I am obtaining this path through file upload: <input type="file" name="imageurl" value="imagefile"></input> Therefore, I ne ...

javascriptjqueryhtmljson

What is the best way to pass a variable in PHP and create an HTML link to a specific element ID simultaneously?

Formulating the question may be challenging, but the concept is quite straightforward: I'd like to pass the variable 'count' using GET and simultaneously direct to the media section. On the page http://page.org.mx/comunicados#media I&apo ...

phphtmlhyperlink

Tips for verifying the types of an Angular component template

I have a specific component that requires two inputs. I am using TypeScript and looking for a way to ensure that the second input is only provided if the first input is also provided. For example: export class MyTestClass implements Test{ @Input() dog?: ...

angulartypescript

Generating dynamic colors from a map in SASS within a media query function

Utilizing @include-media for SASS breakpoints (). Seeking to create a dynamic breakpoint helper text that changes background color on various media sizes. Important Breakpoint mixin - https://raw.githubusercontent.com/eduardoboucas/include-media/master/d ...

cssdynamicsassmixins

What is the most straightforward method to access these four buttons?

Looking to create 4 interactive buttons with a unique behavior. When clicked, the chosen button will change its background image while the other 3 buttons retain their original background image unless hovered over by the user. Additionally, hovering over a ...

javascriptjqueryhtmlcss

What is causing the issue with the minlength and maxlength validations not functioning correctly?

I am currently working with AngularJS and HTML to write code. I am facing an issue where the minlength and maxlength validations are not functioning properly in my code. Below is a snippet of my HTML code: <input type="text" id="healthcomplaint" ng-m ...

javascripthtmlangularjs

How to Adjust Overlapping Text in CSS?

Currently, I am facing an issue with an element overlapping in my CSS file. On a regular browser, one line of text appears fine but on mobile devices, it overlaps into two lines. This problem is specifically for the mobile version of the website, particula ...

htmlcssmobiletwitter-bootstraptablet

Ways to center Bootstrap v4 modal pop-ups vertically

How to properly center Bootstrap 4 modal dialogues vertically? Please Note: I am seeking a precise method to vertically center a Bootstrap modal that covers all scenarios, on all devices, and in all browsers. I needed this for a large single-page applicat ...

csstwitter-bootstrapbootstrap-4bootstrap-modal

Display the entire width of the element without obstructing any subsequent elements

I have a main container with an inner container. I want the inner container to span the full width of the screen. The challenge is that I can't simply set the inner container's width to 100vw because it is nested within the main container, which ...

htmlcss

Does the rendered ID of an ASPX control always appear the same in the source HTML code?

Let's say I have an aspx textbox with id="txtkms". In the HTML view source, it appears as ContentPlaceHolder1_Gridview1_txtkms_1. I'm curious if this control will always be rendered as ContentPlaceHolder1_Gridview1_txtkms_1 every time I run my as ...

c#javascripthtmlasp.net

Angular 4 get request using query strings

The initial code block is performing as anticipated fetchQuotes(): Observable<Quote[]> { return this.http.get(this.url) .map((res: Response) => res.json()) .catch((error: any) => Observable.throw(error.json().error || &apos ...

angularhttpquery-string

What is the best way to assign the value of an HTTP GET request to a subarray in Angular 8

Attempting to store data in a sub-array (nested array) but despite receiving good response data, the values are not being pushed into the subarray. Instead, an empty array is returned. for (var j=0;j<this.imagesdataarray.length;j++){ this.http.g ...

javascriptangulartypescripthttphttpresponse

Observable is encountering an issue where the API service is becoming undefined

Here is a glimpse into my Angular 6 Ionic 4 app - the app.component.js file. I have set up an observable to call the API service every 2 minutes to check for new notifications. The first call goes through smoothly, but then I encounter an error stating can ...

angulartypescriptionic-frameworkionic3ionic4