Lovelace picture-entity aspect ratios stretching to show negative space

Configuration Frontend
1

UPDATE: Solution was to use the wonderful custom button card and also to use proper padding syntax.

Example:

Note the bottom section of each image. Is there a way to force Lovelace to not stretch them vertically, or, if it does, to keep filling the space with the image by cutting the sides and zooming in?

This is a vertical stack of two horizontal stacks of picture entities.

I really, desperately want my Lovelace UI to look good on my desktop, tablet, and phone. And Lovelace is not making this easy. If someone has a suggestion on a card from HACS that works better, let me know.

2

custom button card with aspect ratio set to 1/1.

3

The custom one is the second item. This is with size 100% and aspect 1/1. Are there other settings I might be missing?

I double checked just to make sure, and the source image is a 529x529 square png. Any chance this is a bug with the custom button card?

4

Remove the padding for the card. I’m on mobile so I can’t post code but it should be an example in the styles section. Make the padding zero

5

It is 0. Or at least was at the time of screenshot, but I removed it for making no changes.

6

Can you post the whole card configuration?

7 
aspect_ratio: 1/1
entity: sensor.phone_wifi
entity_picture: /local/peridot.png
padding: 0px
show_entity_picture: true
show_name: false
size: 100%
state_filter:
  Away: grayscale(75%) brightness(25%)
  Home: brightness(100%)
  Just Arrived: blur(4px)
  Just Left: brightness(50%)
tap_action:
  action: call-service
  service: input_boolean.toggle
  service_data:
    entity_id: input_boolean.persons_toggle
type: 'custom:button-card'

Results in

8

yeah, that’s not how you customize padding.

styles:
  card:
  - padding: 0px
1 Like