Card_mod help: styling image of picture-elements

[Jaspack]

I’m configuring a picture-elements card with a background which represents the floor layout of my home. I am struggling with the aspect ratio of the image though. The image is cut off, so part of the layout is invisible.

With simple css changes i can fix this, but i have a hard time mapping this to card_mod. As you can see: I’ve had to add height:100% to the root div and to the hui-image element, and an “object-fit: contain” to the object.

Can somebody help me map these 3 css updates to card_mod such that the css changes are pushed through the shadow dom elements?

[LiQuid_cOOled]

I would reference the Picture-Element thread in this guide to start.

Card-mod - Add css styles to any lovelace card

Here all my posts which may be useful: NOTE: Do not forget to add a "card_mod:" keyword before "style:" (new in card-mod 3). And also read this important note to create optimized code. In most examples here a code is NOT optimized - just to describe a DOM navigation. Entity card post rotating icon (by @dolodobendan) disabled tap_action Entities card (including some special row elements - button, section, divider) post font-size for Entities card post Entities card with attributes …

[Jaspack]

I did find the instructions on card_mod on how to target the shadow elements, but for some reason my configuration doesn’t apply properly. Seems like I don’t really get the way to properly target the nested components.

[LiQuid_cOOled]

Can you post your card code? Pictures of your issue generally slow down the help process.

[Jaspack]

Sure!

Below you can find my current version. Note: all the styling changes, but the last one is working correct. The only element i am not able to target is the last one; the one targeting the “hui-image img”, on which i would like to set property “object-fit: contain”

type: picture-elements
elements:
  - type: state-icon
    entity: light.kamer_1_dimming
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    style:
      top: 60%
      left: 14%
image: /local/Backgrounds/floor1_background_rotated.png
card_mod:
  debug: true
  style: |
    ha-card #root {
      height: calc(100vh - 50px);
      overflow: hidden !important;
    }
    hui-image {
      height: calc(100vh - 50px);
    }
    "hui-image $":
      "img": {
        object-fit: contain;
      }

[LiQuid_cOOled]

@Jaspack

object-fit: contain;

Can you be a little clearer on what you are trying to obtain?

The code you posted does not make that clear and there are most likely other ways to achieve the same end results.

[Jaspack]

This is the before and after; without object-fit contain it will fill in the image in the wrong way (will take the full width, resulting in a cutoff section at the bottom). With the object-fit contain it will make sure the image is stretched the maximum without any cutoffs.

(Don’t pay attention to the icons, they have to positioned correctly later on)

[LiQuid_cOOled]

Thank you, that is a lot clearer! I’ll take another look.

The actual image size plays a lot into how it fits in the card. Let’s test this…

card_mod:
  style:
    hui-image:
      $: |
        #image {
           aspect-ratio: 1/1;
           object-fit: fill;
           }

[Jaspack]

@LiQuid_cOOled

hui-image:
      $: |
        #image {
           aspect-ratio: 1/1;
           object-fit: fill;
           }

Thanks for the response! As far as i can tell, the styling does not reach the dom element it seems:

[LiQuid_cOOled]

It did for me when I tested it…

Fill

Contain

Delete the other code temporarily and just test what I posted

[Jaspack]

You are 100% correct for some reason the | operator after style: (to combine multiple statements) messed this up.
With only that statement it works, many thanks! I eventually went with this:

card_mod:
  style:
    hui-image:
      $: |
        #image {
           aspect-ratio: 1/1;
           object-fit: fill;
           height: calc(100vh - 55px)
        }

[LiQuid_cOOled]

Happy to assist. It wasn’t the |. The quotes will make the code inoperable.