Picture elements state label move when scaling the screen

Third party integrations Floorplan
1

I’m using a picture-elements card for my floorplan.
For the presentation of my tado thermostat, I need two elements:

  1. image that changes color depending on the state (auto,off,heat) on entity climate.living_room
  2. state-label that show the actual temperature in the middle of the image (entity: climate.living_room, attribute: current_temperature.

I position the image and state-label in such a way that the state-label is in the middle of the image.

Now when I scale my browser window (or use another device with a different resolution) the image scale fine, but the state-label looses its position against the image.

Schermafbeelding 2020-05-02 om 15.53.59
Schermafbeelding 2020-05-02 om 15.53.591434×740 244 KB

Schermafbeelding 2020-05-02 om 15.54.16

How can I make sure the state-label stays in the middle of the image?

I use the following code in ui-lovelace.yaml:

        - type: image
          entity: climate.living_room
          tap_action:
            action: more-info
          state_image:
            "auto": /local/floorplan/sensor_thermostat_warm.png
            "off": /local/floorplan/sensor_thermostat_cool.png
          style:
            top: 50%
            left: 50%
            width: 6%
        - type: state-label
          entity: climate.living_room
          attribute: current_temperature
          suffix: '°C'
          title: null
          tap-action:
            action: more-info
          style:
            color: mediumblue
            top: 50%
            left: 49.7%
            width: 2%
            font-family: '"Arial Black", Gadget, sans-serif'
            font-size: 5px
1 Like