Overview Locations Card Zoom

[lenschith]

Hallo zusammen,
ich bastle gerade an den Locations und habe ein Problem mit den Hintergrundbildern und finde im Netz keine Antwort auf mein Problem
Ich habe den den Cards in der Overview Bilder hinterlegt sobald der Browserzoom auf 100% seht sind die Bilder sehr stark gezoomt. Hat das Problem noch jemand oder habe ich was falsch konfiguriert?

Code: Alles auswählen

component: oh-location-card
config:
  backgroundImage: /static/dashboard/cards/test.jpg
  backgroundImageStyle:
    filter: brightness(60%)
  subtitle: Test
  title: Testbereich

Screenshot 2024-01-27 212233.png

Screenshot 2024-01-27 212259.png

Habe es bereits mit folgender Einstellung getestet, aber das ändert nichts.

Code: Alles auswählen

  backgroundImageStyle:
    background-size: 100% 100%
    background-position: center

[peter-pan]

...ich bin mir zwar nicht mehr ganz sicher, wie ich das genau gemacht habe, aber ich vermute mal, das ich den Yaml_Code direkt über die Edit-Funktion eingetragen habe. Bei mir wird auf jeden Fall das Bild nicht gezoomt (beim Wechsel des Browser-Zoom). Im internationalen Forum findest du aber sicher Quellen, wenn nach "location-card" und/oder "f7-block" suchst.
Yaml-Code-Beispiel:

Code: Alles auswählen

component: oh-location-card
config:
  invertText: false
slots:
  glance:
    - component: f7-block
      config:
        style:
          background-image: url(http://192.168.178.38:8080/static/picture/haus.jpg)
          background-position: left
          background-repeat: no-repeat
          background-size: contain
          height: 260px
          left: 0px
          margin-top: 0px
          opacity: 65%
          padding-top: 0px
          position: absolute
          top: 0px
          width: 60%

[lenschith]

Danke Peter,
ich hatte im Forum schon gesucht. Aber hatte nichts passendes gefunden.
Mit deinem Code funktioniert das auch. Allerdings ist der Titel und Subtitle kaum lesbar und ich schaffe es nicht die Schriftfarbe zu ändern bzw. die Titel in den Vordergrund zu bringen damit Sie über dem Image liegt. Hast du da noch eine Idee.

[peter-pan]

Du kannst z.B. die Invertierung einschalten, dann bekommst du den Text "dunkel" angezeigt. Das geht über die UI (Configure Card) oder direkt im Yaml-Code von "false" auf "true".

Code: Alles auswählen

invertText: false

Evtl. kannst du auch noch mit der Durchsichtigkeit/Opacity experimentieren.