I tried to create an interactive floor plan with Homeassistant. The attached code works with the map type “picture”. The floor plan is scaled both in width and height when the browser size or orientation on a tablet changes. So far so good.
But if I now switch to map type “picture-elements”. The floor plan is cropped at the bottom. After a lot of testing, I think I have found out that the “img” tag is not applied correctly to “picture-elements”. Because if I delete this part from the code. The map type “picture” is also displayed incorrectly.
type: picture
image: /local/Dashboard/Grundriss_Zeichenfläche_2160px.png
card_mod:
style: |
ha-card {
width: 100% !important;
height: 90vh !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
background: transparent;
}
img {
object-fit: contain !important;
width: 100% !important;
height: 100% !important;
}
@media (min-aspect-ratio: 19/9) and (max-aspect-ratio: 23/9) {
ha-card {
height: 80vh !important;
}
}
@media (min-aspect-ratio: 23/9) and (max-aspect-ratio: 80/9) {
ha-card {
height: 80vh !important;
}
}
@media (min-aspect-ratio: 80/9) {
ha-card {
height: 50vh !important;
}
}
wrong view with type: picture-elements
correct view with type: picture
