How to adapt the background image in picture elements to the size of the screen?

The image size is 2160 * 1580
I hope the pictures can adapt to devices of different sizes.

kiosk_mode:
  hide_header: false
  hide_sidebar: false
panel: true
views:
  - theme: Backend-selected
    title: 5
    path: plan
    icon: mdi:floor-plan
    type: panel
    badges: []
    cards:
      - type: custom:config-template-card
        entities:
          - input_boolean.er_lou_xi_ce_deng
          - input_boolean.yi_lou_quan_bu_deng_kai_guan
          - input_boolean.1lou_da_ting_deng_xiang_kai_guan
          - input_boolean.yi_lou_ping_tai_logodeng_kai_guan
          - input_boolean.yi_lou_ping_tai_tong_deng_kai_guan
          - input_boolean.1lou_da_ting_deng_xiang_kai_guan
          - input_boolean.yi_lou_da_ting_deng_dai_kai_guan
          - switch.lemesh_cn_1126578447_sw0a04_on_p_2_1
          - input_boolean.yi_lou_zhan_ting_ding_deng_dai
          - switch.lemesh_cn_1126578447_sw0a04_on_p_2_1
          - switch.lemesh_cn_1126578426_sw0a04_on_p_2_1
        card:
          type: picture-elements
          image: /local/UI/bg.png
          panel: true
          style:
            width: 15%
          card_mod:
            style: |
              ha-card {

              }
              #root .container {
               background: red !important;
              }
              .container {
                background: red !important;
              }
              .container img {
                 width: 100vw !important;
              }
              #image {
                background: red !important;
              }
          elements:
            - type: image
              entity: switch.lemesh_cn_1126578426_sw0a04_on_p_2_1
              tap_action:
                action: toggle
              style:
                top: 58%
                left: 46%
                width: 4%
              state_image:
                'off': /local/UI/light_off.png
                'on': /local/UI/light_on.png
            - type: image
              entity: switch.lemesh_cn_1126578447_sw0a04_on_p_2_1
              tap_action:
                action: toggle
              style:
                top: 35%
                left: 51%
                width: 4%
              state_image:
                'off': /local/UI/light_off.png
                'on': /local/UI/light_on.png
            - type: image
              entity: switch.lemesh_cn_1126578447_sw0a04_on_p_2_1
              tap_action:
                action: none
              style:
                pointer-events: none
                top: 50%
                left: 50%
                width: 100%
                mix-blend-mode: lighten
              state_image:
                'off': /local/UI/transparent.png
                'on': /local/UI/zhanting.png
            - type: image
              entity: input_boolean.1lou_da_ting_deng_xiang_kai_guan
              tap_action:
                action: toggle
              style:
                top: 62%
                left: 68%
                width: 4%
              state_image:
                'off': /local/UI/light_off.png
                'on': /local/UI/light_on.png
            - type: image
              entity: input_boolean.1lou_da_ting_deng_xiang_kai_guan
              tap_action:
                action: none
              style:
                pointer-events: none
                top: 50%
                left: 50%
                width: 100%
                mix-blend-mode: lighten
              state_image:
                'off': /local/UI/transparent.png
                'on': /local/UI/dating.png
            - type: image
              entity: input_boolean.yi_lou_ping_tai_tong_deng_kai_guan
              tap_action:
                action: toggle
              style:
                top: 62%
                left: 58.9%
                width: 4%
              state_image:
                'off': /local/UI/light_off.png
                'on': /local/UI/light_on.png
            - type: image
              entity: input_boolean.yi_lou_ping_tai_tong_deng_kai_guan
              tap_action:
                action: none
              style:
                pointer-events: none
                top: 50%
                left: 50%
                width: 100%
                mix-blend-mode: lighten
              state_image:
                'off': /local/UI/transparent.png
                'on': /local/UI/dating.png
            - action: none
              image: /local/UI/title.png
              style:
                left: 62.5%
                top: 8.4%
                width: 60%
              tap_action:
                action: navigate
                navigation_path: /lovelace-1/plan
              hold_action:
                action: none
              type: image
            - action: none
              image: /local/UI/2.sidebar/OFF/home.png
              style:
                left: 13.9%
                top: 33.2%
                width: 17.6%
              hold_action:
                action: none
              type: image
            - action: none
              image: /local/UI/2.sidebar/OFF/all.png
              style:
                left: 13.9%
                top: 42.2%
                width: 17.6%
              type: image
              tap_action:
                action: call-service
                service: input_boolean.turn_on
                service_data:
                  entity_id: input_boolean.yi_lou_quan_bu_deng_kai_guan
            - action: none
              image: /local/UI/2.sidebar/OFF/media.png
              style:
                left: 13.9%
                top: 51.2%
                width: 17.6%
              tap_action:
                action: call-service
                service: input_boolean.turn_off
                service_data:
                  entity_id: input_boolean.yi_lou_quan_bu_deng_kai_guan
              type: image
            - entity: sensor.date
              hold_action:
                action: none
              style:
                color: rgba(255, 255, 255, 0.5)
                font-size: 1.2vw
                font-weight: 300
                left: 19%
                letter-spacing: 0.24vw
                text-align: left
                top: 17%
                width: 30%
              tap_action:
                action: none
              type: state-label
            - entity: sensor.time
              hold_action:
                action: none
              style:
                color: rgba(121, 231, 255, 0.7)
                font-size: 3vw
                font-weight: 400
                left: 3.5%
                letter-spacing: '-0.05vw'
                max-width: 1px
                top: 11%
              tap_action:
                action: none
              type: state-label
            - type: custom:simple-weather-card
              entity: weather.wo_de_jia
              name: ' '
              card_mod:
                style: |
                  :host {
                    left: 14%;
                    top: 25%;
                    width: 20%;
                  }
                  ha-card {
                    background: none; 
                    color: white !important; 
                    font-size: 100%; 
                    height: 100vh;
                  }
              tap_action:
                action: navigate
                navigation_path: /dashboard-ipad/weather
            - color_thresholds:
                - color: '#4dd2ff'
                  value: 17
                - color: '#01a4db'
                  value: 20
                - color: '#fccd68'
                  value: 26
                - color: '#ff1a1a'
                  value: 30
              entities:
                - >-
                  sensor.loease_cn_blt_3_1k5i4q678k400_t49bt_temperature_p_2_1001
              icon: mdi:home-thermometer-outline
              update_interval: 600
              show:
                icon: true
                legend: false
                name: false
              card_mod:
                style: |
                  :host {
                   left: 14%;
                   top:  88.6%;
                   width: 22.4%;
                   overflow: hidden;
                   height: 15%;
                   background: none  !important;
                   box-shadow: none !important;
                  }
                  .header {
                   font-size: 100%;
                   position: absolute !important;
                   width: 5% !important;
                   padding: 1% !important;
                   right: 20% !important;
                   top: 15% !important;
                  }
                  ha-card {
                   background: none  !important;
                   padding: 0 !important;
                   height: 100vh !important;
                  }
                  .icon > ha-icon {
                   width:30% !important;
                   height:100% !important;
                  }
                  .state__time{
                   font-size:1vw !important;
                   margin-top: 0.2vw;
                   font-weight: 300 !important;
                   opacity: 0.6 !important;
                  }
                  .states {
                   font-size: 80% !important;
                   padding: 1vw 0vw 0vw 0vw  !important;
                   margin: auto !important;
                   width: 70%;
                  }
              tap_action: null
              action: navigate
              navigation_path: /lovelace-jason/weather
              type: custom:mini-graph-card

  1. Never ever place picture-elements inside config-template-card (CTC). Use CTC for particular element only - if really needed (NOT in most cases).
  2. Google “picture elements small tutorial” - it will give you answers for styling, rescaling, resizing etc.
  3. Where the pt. 2 cannot give required results - use card-mod (go to main card-mod thread → 1st post → link at the bottom titled “fantastic” → picture-elements).