Fix area card background and improve grid support

home-assistant · Jul 3, 2024 · e2c8389 · e2c8389
1 parent 8232983
commit e2c8389
Showing 1 changed file with 13 additions and 7 deletions.
diff --git 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;