Can't resize images on the image-card

Configuration Frontend
1

hi dudes,
I’m slowly no longer understanding the world. I cannot change the size of the images on the image card by dragging the mouse. Changing the size of the picture card is generally a disaster. Before implementing any gimmicks, the basic things should work first.

It’s possible, and I’m just a (stupid or ignorant) beginner?
Ok, show me how to do it step by step, then you can use it to update the documentation, too and you will be my hero for today. (win win win)
I’ll send you my picture and we’ll create a dashboard together. Come on, show me!

So long
Pc

2

You might have never understood it. :wink:

Fixed size elements makes no sense in a world with no fixed size screens and browser windows.

1 Like
3

HÄ?
therefor the images should be resizable.
[EDIT]
and since when do percentages define a fixed size?

4

Percentage of what?
A fixed screen or window size?

5

That sounds like me trying to figure out scaling and rotation on 3D objects across platforms. It’s a tricky concept when working across devices.

Because Home Assistant is designed to be responsive across multiple screen sizes and aspect ratios. My phone screen isn’t the same as my computer screen, yet I access HA on both through a browser. In this context, both screens represent 100%, but their actual dimensions differ, and HA adapts accordingly.

If you’re looking for a solution to resizing images, here are two approaches that might help:

  1. Using a Grid Card:
type: grid
columns: 2  # Number of columns in the grid
square: false  # Set to true to make all cards square
cards:
  - type: picture
    image: /local/my_image.jpg
    aspect_ratio: 16:9  # Adjust as needed

This creates a flexible layout, allowing you to organize your images and adjust their aspect ratios.
2. Using a Picture Elements Card with Styling:

type: picture-elements
image: /local/my_image.jpg
elements:
  - type: state-icon
    entity: light.living_room
    style:
      top: 50%
      left: 50%
      transform: translate(-50%, -50%)
      width: 50%  # Resize the image to 50% of its container

This provides finer control over placement and size, with CSS-like styling options.

Hope this clears up the confusion and helps you configure your dashboard exactly how you want it. Let me know how it works out!

6

that’s what i ment. % doesn’t represent absolute values.

@JerryM :
Please throw an eye on this. This is the target/goal.
I think the grid and image maps are not suitable for this, even if the image map offers features that I am looking for. But my images have to be placed with pixel precision.

  1. I’m looking for a way to get sensor values ​​into an HTML-coded page.
  2. I’m looking for a way to adjust the z-index depending on the sensor status, so: off->z-index0, on->z-index:2

I think since you can use id in html that you can do this with HA board resources.

Thank you for your time and your effort. I’ll take a look at this.

AND PLEASE:
I’m a BEGINNER, i.e. I don’t know WHERE to put your code, for example.
Please get into the habit of always mentioning this!

So long
Pc

7

I believe that some version of the yaml I left would work either on the overview (pencil > 3 dots > raw config editor) or I belive you can use the configuration.yaml in homeassistant/ (file editor addon if not already using) to create custom things from entities to cards and then somehow place them in the overview. (I am not 100% certain on all of this because I haven’t tried it yet but I’ve read to much info on home assistant just for my few projects).

I believe for your specific request a HACS would be most efficient:
(HACS is an addon with its own addons page)
I found these two that appear to be close to what you are asking possibly?

These should create a card that asks for code such as

type: custom:html-template-card
title: Sensor HTML Example
content: |
  <div id="sensor-container">
    <img src="/local/your_image.jpg" style="position:absolute; top: 50px; left: 100px; z-index: 0;" id="image-layer">
    <div id="sensor-label" style="position:absolute; top: 50px; left: 100px; z-index: 2;">
      Sensor Value: [[ sensor('sensor.your_sensor') ]]
    </div>
  </div>

or

type: custom:html-template-card
title: Dynamic z-index Example
content: |
  <style>
    #dynamic-layer {
      position: absolute;
      top: 50px;
      left: 100px;
      z-index: [[ '2' if is_state('sensor.your_sensor', 'on') else '0' ]];
    }
  </style>
  <div id="dynamic-layer">
    <img src="/local/your_image.jpg" alt="Dynamic Image">
  </div>
8

Wow, thank you for the information.
I know HACS, and i also know the html-card.
The html-card, hm, the html-card can become annoying, because it doesn’t deliver what the name promises. I worked with it, but… hm
Example:
i like using comments, though i know, what i’ve done or thought in the past.
Using a comment in this card, you will get a black dashboard, no edit-mask can be displayed. I could solve this by using the raw-editor.
Javascript is not enabled,too. maybe this could be intercepted by sensors, but how many of these i shell integrate at the end? 1000? I decided to switch again and use now the website-dashboard… but can it deliver ? i don’t know yet. I have to check out.

The other card: i will throw an eye on it. Thanks

So long
Pc

1 Like
9

Let me know what you find as Ill probably have use for the solution in the future. I haven’t had success with many HACS so not surprised to learn its not exactly what id think it is.

10

Technically, this is not a WTH thread and should be moved to “Configuration / Frontend” because this is a merely “user support thread”.

11

@Ildar_Gabdullin :
you are right, sorry. And I’m very thankfull for the support, even it’s the wrong category.

@JerryM :
Yes, of course, and i will open a thread, solved by myself :wink:
The categories official and custom certainly have their place

so long
Pc

2 Likes
12

I am sure many people will be happy to help you - let’s just do it in a proper place)))

13

no prob…
waiting for moderator to move…

14

Moved. All the best!