Lovelace: Sizing the main image of picture-elements

Configuration Frontend
22

Sorry I missed it there.

However I have found, that I need to add this code before I add picture-element card

panel: true

after adding this picure occupy full size of the screen

image
image1920×1440 127 KB

23

But still its not exactly what I am looking for.

Is there a way to prevent main image from scaling? In other words to keep it in its original dimensions? With this parameter it fills the screen as intended, but still resize according to size of the side bar for example…

24

If the main image is NOT resized - then how is it supposed to be used on different clients (pc, tablet, phone)?

25

I understand.
It is {was) for a case where I was making a device specific dashboard (e.g. wall mounted tablet).
In the meantime by experimenting I have found, that resizing is not a problem in precise overlaying of image elements, so I am happy.

27

This worked for me! Tnx!

28

got live view in ha now xD
image

29

I solved this by putting a blank image (transparent .png image with no content) in the picture elements card. Specified athe actual image in the elements section. The image can then be resized.

type: picture-elements
elements:
  - type: state-label
    entity: sensor.teksthelper
    prefix: Dimmer Glazenkast
    style:
      top: 150%
      left: 50%
  - type: image
    image: /local/Oranje_driehoek_uitroepteken.png
    style:
      top: 75%
      left: 50%
      width: 55%
image: /local/Blank.png

It looks like this
1000029364

and I can resize the triangle to any size I want by adjusting the width percentage.