[css] make image tiles cover the tile

Still have some work to do, just migrated all my ST stuff to Hubitat the last 2 days. I have a few lighting and motion sensors left. I setup the dashboard in Hubitat similtar to what I had setup using Actiontiles in ST

2 Likes

I'd swap the presence sensors and the front porch cams to the cams are together and resize the radars so you dont have the big grey bars on top and bottom, but looks great otherwise.

I've tried to resize the pictures a few times and that's all it gives me each time. Either I'm just missing something, not doing something correctly or just don't get it. I know in ST it all showed up fine and filled the entire tile up like it should. Ugh

If you increase the column and row number and decrease the column and row size it will give you finer control.

On the dashboard gear:
image

On the tile 3 dots:

1 Like

Yep tried that and it still at some point either makes the tile really huge but picture fits or really small and picture kinda fits but nothing that seems to fill up the whole tile. I find that Hubitat is actually limiting in how this is implemented compared to ActionTiles that didn't have this issue, as with Hubitat your forced or at least it seems to me that you have to adjust the tile to make a picture fit best effort rather than having the picture just fit the whole tile.

Have you tried tweaking the tile with CSS? Something like this might help (change tile # to the one your targeting).

#tile-99 .tile-contents {
  height: 100%; 
  width: 100%;
}

EDIT: If you haven't, try running it thru smartly (always backup your JSON 1st). My bet is spelcheck has a fix for that already coded :wink:

So I went back and tried just the tile size stuff again as I must have missed something in doing this yesterday thinking it does not change it when changing the tile size. If I make the tile size H=2 and W=4 it does fill it up now, but that tile size is not what I'm looking for.

Just dropping the tile back to H=2 W=3 kills the full screen size of the image. I then put in the suggested CCS information and it didn't change anything, seems I have to have this exact tile size to make it fill up the entire tile

weather image h2 w3

I know it "can" be done, we just need the right code. @spelcheck applies fixes for all kinds of mods and other things so they look pretty. He'll be able to tell us. You could also pastebin.com me your JSON and I can mess with it later, off to do yard work for now

1 Like

We'll split this into its own thread, but here is what you're looking for to make image content "cover" the tile. @dpdurst

.tile.image .inset-auto img {
    object-fit: cover
}
2 Likes

Yes! that fixed it, thanks so much for this.

2 Likes

You might want:

.tile.image .inset-auto img {
    object-fit: fill
}

It depends on whether you care about the aspect ratio.

3 Likes

This works as well, the aspect ratio I didn't notice a whole lot but do see the difference in using both of the settings I have saved them both for the future. Thanks

Use background option in the image tile and the image will fit the tile.

I have tried all of these solutions with no luck.
Tried the CSS code and putting them on the background still will not scale right.

It should be object-fit: cover.

1 Like

Already inserted that in the CSS no difference. Actually inserted both nothing changed

1 Like

I've notice sometimes that CSS changes don't stick after other changes have been made and I need to reset to the default layout and reapply. Maybe delete this code, refresh the dashboard and try again?