Preset height of picture-glance based on column or screen width

Configuration Frontend
1

Hi All,

TL;DR; is there a column width variable that I can use to calculate a height?

I have my camera shown as my first card in the dash. Since it takes a short while to load, it results in moving the buttons below that card once the camera image is loaded. I fixed that behaviour by hardcoding the height using card-mod. So now one can tap a button without the risk of having it moved downwards due to the delayed appearance of the camera image.

All (technically) fine so far, however… Since the actual height of the camera image depends in the width (16x9 ratio), I want to make the height dynamic but still be able to set it before the actual image is loaded. So I thought of using the column width in which the card is located.

Using the inspector I’ve found a:

.column {
flex: 1 0 0px;
max-width: 500px;
min-width: 0px;
}

In <div class=column> that’s likely the one. I can set it using card-mod, but want to read it’s value. Does anyone know if that is possible and if you happen to know how, I’d love to know as-well.

A yes/no on the possibility and maybe some sort of logic on how to do things, would already be of great help.

Hope to hear/read your idea’s on this.

2

var() seems to be able to extract the color values from the CSS elements, like var(–label-badge-orange)
Maybe that can be used here.

3

Thanks for your reply. I’ve seen multiple variables, like:

  --paper-font-body1_-_line-height;
  --layout-vertical_-_-ms-flex-direction: column;
  --layout-vertical_-_-webkit-flex-direction: column;
  --layout-vertical_-_flex-direction: column;
  --layout-vertical-reverse_-_display: var(--layout_-_display);
  --layout-vertical-reverse_-_-ms-flex-direction: column-reverse;
  --layout-vertical-reverse_-_-webkit-flex-direction: column-reverse;
  --layout-vertical-reverse_-_flex-direction: column-reverse;
and more

Unfortunately, for as far as I can see, there is none that refers to the column width. I fear there is none, but hope someone has a suggestion.
For the record, I tried:

style: |
  ha-card { height: 100% !important; }

That doesn’t work, which makes sense cause it doesn’t know what 100% refers to.
Currently the height contains a number of pixels and that works with the limitation as described in the opening post.

4

I changed the name if the topic cause I think it makes more sense now.

So my end-goal is to set the height of my picture-glance to 9/16th of the column width before the actual image is loaded. I thought of using javascript (screen width or column width), but couldn’t figure out how to combine the return-value into the card-mod. Would be great if you could do something like:

ha-card { height: js(<javascript code>) !important; }

Is there anyone that has a smart trick to pull out of its sleeve?