Resize picture-element card with state_image

Configuration Frontend
1

I have a very basic set up trying to show when I am home and away. I’ve loaded two images to a picture-element to change based on it’s state but the picture shows as massive. How can I resize this image?

I’ve tried reading up on style but unfortunately it doesn’t make sense to me. This is my code at the moment:

cards:
  - type: picture-entity
    entity: device_tracker.james_s10
    state_image:
      "home": /local/james_icon_small.png
      "not_home": /local/james_icon_bw_small.png

Any help would be greatly appreciated.

image
image2414×1213 157 KB

2

You can’t resize it. The card will always be 1 card width. Do you have other people that will be added?

EDIT: Well you can sort of resize it. If you make your input image super long in width and short in height, it will shrink the image but the card width on screen will remain the same.

If you use a glance card, it will shrink the image to the size of a glance item.

3

Thanks very much.

I added other cards to the page and it resized it accordingly so that is good enough for now.