Ion-thumbnail adjust size

Ionic Framework ionic-v3
1

Hi,
could somebody please tell me how to correctly adjust size of an ion-thumbnail in a construct like this?

<button ion-item>
    <ion-thumbnail item-left>
        <ion-img src="/img/thumbnail-img.png"></ion-img>
    </ion-thumbnail>
</button>

Currently it takes 80x80px, but I’d like to limit this to e.g. 50x50px, but it seems quite complicated and I don’T think messing around with multiple items via css is the way to go here?
Thanks!

2

Ok, adjusting the size seems to work well with

.item ion-thumbnail {
    min-width: 5rem;    
    min-height: 5rem;
    img {
        max-width: 5rem;    
        min-width: 5rem;
    }
}

There is just one issue left:
The image is vertically centered, which looks strange sometimes. Is there any way to move it to the top of the list item, with dynamic list item heights?

5 Likes
3

Hi @Rasioc, any success on fixing this issue? I am facing exactly the same issue.

Tnx

4

Hi, @mdevalk.
Actually not yet. For the moment I will accept this.

6

Hi everyone. This worked for me.

ion-thumbnail {
  --size: 8em;
  max-width: 20vw;
  max-height: 20vw;
}