How to make ion-avatar bigger (double)?

I have an Ionic React app and I want to show the avatar at double size sometimes.

It seems to be around 36px by default. The documentation says

If placed inside of an ion-chip or ion-item , the avatar will resize to fit the parent component.

So I tried this in a React component:

    return (
      <IonItem className="giant">
        <IonAvatar className="center-img">
          <img
            src={myPic}
            alt={myPicName}
          />
        </IonAvatar>
      </IonItem>
    );

With the following CSS:

ion-item.giant {
   --min-height: 144px;
}

This doesn’t work. ion-item has a height of 144px, but instead of expanding to fit the ion-item size, the avatar stays at a size of 40x40.

What is the right way to increase the size of the avatar? Ideally, I would like to be able to specify a height and have the avatar resize to that height.

1 post - 1 participant

Read full topic