Add an image fit mode to hui-image and picture-entity-card (#17959)

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),

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 {

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()),
   })
 );