Hi! I use a picture-elements card. When my screen is small everything fits perfectly. Howevery when my screen gets wider, the image becomes too large and scrollbars appear. How can i set a fixed max height for the image?
I have tried with card-mod, but it seems my css is ignored.
Good: https://i.imgur.com/Z3usPfL.png
Bad: https://i.imgur.com/hf0r0fb.png
I’m facing the same issue.
Any updates on this?
What do you need exactly?
Height of the card itself may be changed ny card-mod:
type: picture-elements
card_mod:
style: |
ha-card {
height: 200px !important;
}
elements:
...
but some elements will be surely clipped.
What does it mean - “gets wider”?
Usually it “gets wider” when using different clients (desktop, mobile device portrait / landscape).
Assume we are talking about a “panel mode”. When a viewport changes, PE card adapts itself, and this may cause appearing scrollbars.
To prevent this, you may prepare different background images - with different aspect ratios, and then use these different images on different clients.
P.s. check this
Hello Ildar_Gabdullin
What I’m trying to achieve is a responsive picture elements card.
The card itself needs to be as wide as possible, without getting bigger then the bottom of the screen.
By default I have a lot of space left, right and below the picture-elements card.
This needs to be: no space (or as little as possible) below the card, and left and right needs to scale according to the aspect-ratio of the image.
I’ve fiddled around with card_mod a bit but the result isn’t what it needs to be.
card_mod:
style:
hui-image:
$: |
.container img#image {
max-height: 600px;
}
.container {
max-height: 100%;
}