From 6b31c0745976045050a4990972beea6e7dba0ef8 Mon Sep 17 00:00:00 2001
From: karwosts <32912880+karwosts@users.noreply.github.com>
Date: Tue, 26 Sep 2023 14:08:56 -0700
Subject: [PATCH] Add an image fit mode to hui-image and picture-entity-card
 (#17959)

---
 src/panels/lovelace/cards/hui-picture-entity-card.ts  |  1 +
 src/panels/lovelace/components/hui-image.ts           | 11 +++++++++++
 .../config-elements/hui-picture-entity-card-editor.ts |  1 +
 3 files changed, 13 insertions(+)

diff --git a/src/panels/lovelace/cards/hui-picture-entity-card.ts b/src/panels/lovelace/cards/hui-picture-entity-card.ts
index 3f89389dad..1353836009 100644
--- a/src/panels/lovelace/cards/hui-picture-entity-card.ts
+++ b/src/panels/lovelace/cards/hui-picture-entity-card.ts
@@ -152,6 +152,7 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard {
           .cameraView=${this._config.camera_view}
           .entity=${this._config.entity}
           .aspectRatio=${this._config.aspect_ratio}
+          .fitMode=${this._config.fit_mode}
           @action=${this._handleAction}
           .actionHandler=${actionHandler({
             hasHold: hasAction(this._config!.hold_action),
diff --git a/src/panels/lovelace/components/hui-image.ts b/src/panels/lovelace/components/hui-image.ts
index 33201fd7af..152f990a0d 100644
--- a/src/panels/lovelace/components/hui-image.ts
+++ b/src/panels/lovelace/components/hui-image.ts
@@ -60,6 +60,8 @@ export class HuiImage extends LitElement {
 
   @property() public darkModeFilter?: string;
 
+  @property() public fitMode?: "cover" | "contain" | "fill";
+
   @state() private _imageVisible? = false;
 
   @state() private _loadState?: LoadState;
@@ -211,6 +213,8 @@ export class HuiImage extends LitElement {
         })}
         class="container ${classMap({
           ratio: useRatio || this._lastImageHeight === undefined,
+          contain: this.fitMode === "contain",
+          fill: this.fitMode === "fill",
         })}"
       >
         ${this.cameraImage && this.cameraView === "live"
@@ -417,6 +421,13 @@ export class HuiImage extends LitElement {
         background-position: center;
         background-size: cover;
       }
+      .ratio.fill {
+        background-size: 100% 100%;
+      }
+      .ratio.contain {
+        background-size: contain;
+        background-repeat: no-repeat;
+      }
 
       .ratio img,
       .ratio div {
diff --git a/src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts
index 8150d99968..bf5ffe1539 100644
--- a/src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts
@@ -25,6 +25,7 @@ const cardConfigStruct = assign(
     show_name: optional(boolean()),
     show_state: optional(boolean()),
     theme: optional(string()),
+    fit_mode: optional(string()),
   })
 );