Hi !
I’d like the main image of my picture-elements card (a 2D floorplan) to size according to the size of the display of the viewer, in a responsive manner.
How would this be accomplished? I already tried:
- title: BG
id: bg
background:
icon: mdi:door-open
cards:
- type: picture-elements
image: /local/images/bg.png
style:
width: 100%
height: 100%
elements:
... all kinds of elements go here ...
Which didn’t work, even if I expected it to 
thanks for copying the url but there is not much info in it
It literally links to the parameter that handles what is being asked in the thread. Panel=True. Not much more you could ask for…
Don’t get me wrong but is there no option to give the size scaling instead of saying panel = true ? I don’t want my floorplan taking the whole screen.
Thnx in advance
Lovelace scales cards based on the viewing screen and there is a maximum size for cards horizontally. Because of that, it limits what you can do with horizontal and vertical card sizes. Your only option is to use panel: true. You can attempt to use card modder to get the size you want, but typically those sizes are in pixels so it may look bad on one screen vrs another.
I think I had a similar issue. maybe this helps
When using panel=true for floor plan view, the image was automatically scaled way to big, taking up the entire screen on most of my devices and requiring me to scroll down to see certain rooms (annoying).
To fix I added empty spaces to the left and right of my floorplan .png files (basically increased canvas width in photoshop) until I was satisfied with the view on most of my devices.
This topic is old, but I do have this issue at hand currently… my floorplan png is too big for most screens… how can I “scale” that to the browser in panel mode?
Same here, the image in the panel mode is bigger than the screen.
@sender, did you fix it for you?
I played with the image size, played with the canvas size. nothing seems to work.
No fix here… I think it is not possible. At least… not for me with the help I got 
.
Edit: in width it kinda works for the image, but then the entities dont zive along… rendering the picture practivlcally hidden by the entities in a small screen…
I have the exact same issue. VERY frustrating to be honest. I get the limitations of responsive design, but man. The problem results because I cant tell the “panel” that it should use the vertical view as limit instead of the horizontal one. In my experience Dashboards are more often than not supposed to be “onepagers” instead of pinterest boards still this silly behavior persist in many dashboarding applications.
I will try out the card modder suggested by petro since this frustrating behavior forces you to build separate Dashboards for different Screens anyway. May as well go canvas and define everything pixel perfect.
For anyone else having this issue and unwilling to add space in their floorplan master image another possible workaround is to layout your dashboard in panel mode with vertical & horizontal stacks. Depending on the ratio of your floorplan to your desired screensize this can have decent results.
Example: (target screen standard 4k or FHD monitor or tablet size with roughly 2:1 ratio)
Your floorplan is square, then having two columns will divide the screen in very roughly two squares. You can e.g. have your floorplan on the left and other controls & weather widgets on the right. Depending on how crazy you want to get you can then nest horizontal & vertical stacks in a way that gives you sufficient control over the layout while still retaining some benefits of Resp. Design.
Hi,
This is how I resolved it:
title: EZVIZ
icon: mdi:video-outline
panel: true
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
color_type: blank-card
styles:
card:
- width: 200px
- type: picture-elements
entity: ...
...
- type: custom:button-card
color_type: blank-card
styles:
card:
- width: 200px
I had one image and I wanted to take full space of my TV (I’m using google cast). I just added white spaces to the image in such a way that the resulting image has an aspect ratio of 9/16, also activated panel mode.
This is something I am trying to figure out - I have 2 floor plans like this:
Both resolutions are much bigger but elements card its scaling it to the same width and I am trying to figure out how to leave them in their original resolutions. They are not even taking up full horizontal space available.
Any help appreciated.
Here I tried to sort out these issues:
— how does behave a background image on different clients;
— how do behave elements on different clients.
You may ping me at that thread if you have any questions.
Thanks, I am going to have a look
I read all your oosts and although I found it very usefull in learning how to change icons and badges, still can’t figure out how to make this image to occupy whole widh of available screen.
It is explained there how an image occupies an available area.
