White space underneath picture - picture entity card

Configuration Frontend
1

I’ve a very strange error which i dont know how to resolve.

For the control of my TV, Netflix, Playstation and so on i use scripts which i activate through the frontend of my dashboard. To do so i use the picture entity card and use a toggle action to activate them. So far so good everythings works.

But the thing im facing is. On my browser on the PC (Chrome latest version) the icons appear good without any white spaces. But on my telephone (chrome latest version) i get underneath the icons a white space. I tried solving it with the aspect_ratio but that didn’t help on my phone. Like nothing worked

Webbrowser

image

Telephone

chrome
chrome1080×1002 84.9 KB

Does anybody know what can be the problem, i want them to be perfectly filled (im an perfectionist if it comes to this).

Code is found below

cards:
  - type: picture-entity
    entity: script.1555789712357
    tap_action:
      action: toggle
    state_image:
      'on': /local/ziggo.png
      'off': /local/ziggo.png
    show_state: false
    show_name: false
    aspect_ratio: 16x11
  - type: picture-entity
    entity: script.1555789745221
    tap_action:
      action: toggle
    state_image:
      'on': /local/netflixlogo.jpg
      'off': /local/netflixlogo.jpg
    show_state: false
    show_name: false
    aspect_ratio: 16x11
  - type: picture-entity
    entity: script.1555789745889
    tap_action:
      action: toggle
    state_image:
      'on': /local/playstation.jpg
      'off': /local/playstation.jpg
    show_state: false
    show_name: false
    aspect_ratio: 16x11
  - type: picture-entity
    entity: script.1555789719863
    tap_action:
      action: toggle
    state_image:
      'on': /local/off_logo.jpg
      'off': /local/off_logo.jpg
    show_state: false
    show_name: false
    aspect_ratio: 16x11
type: horizontal-stack
2

It’s because the aspect ratio of your picture entity changes on the smaller width phone screen (narrower compared to height).

There does not appear to be a setting to enable picture scaling natively in the card.

You might be able to use card-mod to set the picture css scaling.

EDIT: Just noticed you are specifying an aspect ratio. Try without it.

aspect_ratio: 16x11
3

Thanks for your reply. Aspect ratio is not working as it shows the same as with my phone

image

will try card-mod later. I’m not that good in CSS :slight_smile: have to take my time for that

4

Yeah I’m useless with css, hopefully someone here will know the correct way to stretch the image to fit.

5

I tried but I don’t seem to get the correct code to stretch the image.

Some css expert around here? :smile:

6

Have you tried the CSS

height: 100%;

for the image yet?

7

I came this far and none of it worked.

  - type: picture-entity
    entity: script.1555789712357
    tap_action:
      action: toggle
    state_image:
      'on': /local/ziggo.png
      'off': /local/ziggo.png
    show_state: false
    show_name: false
    style: |
      ha-card {
        height: 100%;    
        margin: 0 auto;
       }
        img. {
          display: block;
          margin-left: auto;
          margin-right: auto;
              
      }

I’m no star if it comes to CSS

8

Got it eventually working with button-card

cards:
  - type: 'custom:button-card'
    entity_picture: /local/ziggo.png
    show_entity_picture: true
    size: 100%
    styles:
      card:
        - border-radius: 10%
    tap_action:
      action: call-service
      service: script.toggle
      service_data:
        entity_id: script.1555789745221
  - type: 'custom:button-card'
    entity_picture: /local/netflixlogo.jpg
    styles:
      card:
        - border-radius: 10%
      img_cell:
        - border-radius: 15%
    tap_action:
      action: call-service
      service: script.toggle
      service_data:
        entity_id: script.1555789745221
    size: 80%
    show_entity_picture: true
  - type: 'custom:button-card'
    entity_picture: /local/playstation.jpg
    styles:
      card:
        - border-radius: 10%
        - justify-content: start
        - align-items: start
        - margin: none
    tap_action:
      action: call-service
      service: script.toggle
      service_data:
        entity_id: script.1555789745889
    show_entity_picture: true
    size: 95%
  - type: 'custom:button-card'
    entity_picture: /local/off_logo.jpg
    tap_action:
      action: call-service
      service: script.toggle
      service_data:
        entity_id: script.1555789719863
    show_entity_picture: true
    size: 125%
    styles:
      card:
        - border-radius: 10%
type: horizontal-stack

image