From 81c796beb43b03f3e28a41a8aa298b9da8398de3 Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Wed, 3 Jul 2024 13:16:55 +0200
Subject: [PATCH] Fix area card background and improve grid support (#21259)

---
 src/panels/lovelace/cards/hui-area-card.ts | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-area-card.ts b/src/panels/lovelace/cards/hui-area-card.ts
index 5ebf4b4eae..387110d9ae 100644
--- a/src/panels/lovelace/cards/hui-area-card.ts
+++ b/src/panels/lovelace/cards/hui-area-card.ts
@@ -412,19 +412,19 @@ export class HuiAreaCard
     if (this._config.show_camera && "camera" in entitiesByDomain) {
       cameraEntityId = entitiesByDomain.camera[0].entity_id;
     }
-    cameraEntityId = "camera.demo_camera";
 
     const imageClass = area.picture || cameraEntityId;
 
-    const ignoreAspectRatio = imageClass || this.layout === "grid";
+    const ignoreAspectRatio = this.layout === "grid";
 
     return html`
       <ha-card
         class=${imageClass ? "image" : ""}
         style=${styleMap({
-          paddingBottom: ignoreAspectRatio
-            ? "0"
-            : `${((100 * this._ratio!.h) / this._ratio!.w).toFixed(2)}%`,
+          paddingBottom:
+            ignoreAspectRatio || imageClass
+              ? "0"
+              : `${((100 * this._ratio!.h) / this._ratio!.w).toFixed(2)}%`,
         })}
       >
         ${area.picture || cameraEntityId
@@ -435,8 +435,10 @@ export class HuiAreaCard
                 .image=${area.picture ? area.picture : undefined}
                 .cameraImage=${cameraEntityId}
                 .cameraView=${this._config.camera_view}
-                .aspectRatio=${this._config.aspect_ratio ||
-                DEFAULT_ASPECT_RATIO}
+                .aspectRatio=${ignoreAspectRatio
+                  ? undefined
+                  : this._config.aspect_ratio || DEFAULT_ASPECT_RATIO}
+                fitMode="cover"
               ></hui-image>
             `
           : area.icon
@@ -586,6 +588,10 @@ export class HuiAreaCard
         opacity: 0.12;
       }
 
+      .image hui-image {
+        height: 100%;
+      }
+
       .icon-container {
         position: absolute;
         top: 0;