Lovelace picture elements card image too large in firefox/safari

I’m still learning with Lovelace, and I included an image of my room and added some elements. I noticed that in firefox and safari, the image draws at full resolution which does not work, in chrome it renders as expected. How can i force the image to render to fit the card. Example below

Did you try panel: true options for the Rooms view?

I still need to leard a lot. That mostly worked, but not it fills the screen. Need to figure out hot to size an image to the size I’l like without necessarily just “resizing the image”

Thanks for the tip

You know what, although that did “work”, why did chrome allow me to have two picture as a card, and it was smart enough to size the images to fit into the cards? Panel: true does fill the panel with the image, but that’s not exactly what I need to do either.

So is there not a way to take an image and have it render in a card without making the size of the image small?

You can’t size cards horizontally. It’s part of the interface design when dealing with cards. Only way to get a larger photo is to have it fit the whole screen, which is what panel: true does.

What is interesting to me is that chrome did exactly that. it took my larger image and fit it properly into a card. I actually had two images (two rooms) that both displayed on the same page. It was just in firefox/safari where the image did not “resize” to fit into the card.

Oh, I miss understood your issue. That’s interesting. You should bring this up with the people over on lovelace on discord.

1 Like