diff --git a/src/panels/lovelace/cards/hui-humidifier-card.ts b/src/panels/lovelace/cards/hui-humidifier-card.ts
index 990d0faaf7d7..2efb7d4a85c6 100644
--- a/src/panels/lovelace/cards/hui-humidifier-card.ts
+++ b/src/panels/lovelace/cards/hui-humidifier-card.ts
@@ -7,7 +7,7 @@ import {
   html,
   nothing,
 } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { fireEvent } from "../../../common/dom/fire_event";
@@ -26,6 +26,39 @@ import { HumidifierCardConfig } from "./types";
 
 @customElement("hui-humidifier-card")
 export class HuiHumidifierCard extends LitElement implements LovelaceCard {
+  private _resizeObserver?: ResizeObserver;
+
+  public connectedCallback(): void {
+    super.connectedCallback();
+    this._attachObserver();
+  }
+
+  public disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this._detachObserver();
+  }
+
+  @query(".container") private _container!: HTMLElement;
+
+  private _attachObserver(): void {
+    if (!this._resizeObserver && this._container) {
+      this._resizeObserver = new ResizeObserver(() => {
+        this._container.style.setProperty(
+          "--height",
+          `${this._container.clientHeight}px`
+        );
+      });
+      this._resizeObserver.observe(this._container);
+    }
+  }
+
+  private _detachObserver(): void {
+    if (this._resizeObserver) {
+      this._resizeObserver.disconnect();
+      this._resizeObserver = undefined;
+    }
+  }
+
   public static async getConfigElement(): Promise<LovelaceCardEditor> {
     await import("../editor/config-elements/hui-humidifier-card-editor");
     return document.createElement("hui-humidifier-card-editor");
@@ -82,6 +115,8 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
   protected updated(changedProps: PropertyValues): void {
     super.updated(changedProps);
 
+    this._attachObserver();
+
     if (
       !this._config ||
       !this.hass ||
@@ -126,13 +161,15 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
     return html`
       <ha-card>
         <p class="title">${name}</p>
-        <ha-state-control-humidifier-humidity
-          prevent-interaction-on-scroll
-          .showCurrentAsPrimary=${this._config.show_current_as_primary}
-          show-secondary
-          .hass=${this.hass}
-          .stateObj=${stateObj}
-        ></ha-state-control-humidifier-humidity>
+        <div class="container">
+          <ha-state-control-humidifier-humidity
+            prevent-interaction-on-scroll
+            .showCurrentAsPrimary=${this._config.show_current_as_primary}
+            show-secondary
+            .hass=${this.hass}
+            .stateObj=${stateObj}
+          ></ha-state-control-humidifier-humidity>
+        </div>
         <ha-icon-button
           class="more-info"
           .label=${this.hass!.localize(
@@ -156,10 +193,15 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
 
   static get styles(): CSSResultGroup {
     return css`
-      ha-card {
+      :host {
+        position: relative;
+        display: block;
         height: 100%;
+      }
+      ha-card {
         position: relative;
-        overflow: hidden;
+        height: 100%;
+        width: 100%;
         padding: 0;
         display: flex;
         flex-direction: column;
@@ -178,15 +220,31 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
+        flex: none;
       }
 
-      ha-state-control-humidifier-humidity {
-        width: 100%;
-        max-width: 344px; /* 12px + 12px + 320px */
-        padding: 0 12px 12px 12px;
+      .container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        overflow: hidden;
+        max-width: 100%;
         box-sizing: border-box;
       }
 
+      .container:before {
+        content: "";
+        display: block;
+        padding-top: 100%;
+      }
+
+      .container > * {
+        padding: 8px;
+        max-width: var(--height, 100%);
+        height: 100%;
+      }
+
       .more-info {
         position: absolute;
         cursor: pointer;
@@ -201,6 +259,7 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
 
       hui-card-features {
         width: 100%;
+        flex: none;
       }
     `;
   }
diff --git a/src/panels/lovelace/cards/hui-thermostat-card.ts b/src/panels/lovelace/cards/hui-thermostat-card.ts
index cfa34d81e86f..2c3a8de54489 100644
--- a/src/panels/lovelace/cards/hui-thermostat-card.ts
+++ b/src/panels/lovelace/cards/hui-thermostat-card.ts
@@ -7,7 +7,7 @@ import {
   html,
   nothing,
 } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { fireEvent } from "../../../common/dom/fire_event";
@@ -18,14 +18,47 @@ import "../../../components/ha-icon-button";
 import { ClimateEntity } from "../../../data/climate";
 import "../../../state-control/climate/ha-state-control-climate-temperature";
 import { HomeAssistant } from "../../../types";
+import "../card-features/hui-card-features";
 import { findEntities } from "../common/find-entities";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
-import "../card-features/hui-card-features";
 import { LovelaceCard, LovelaceCardEditor } from "../types";
 import { ThermostatCardConfig } from "./types";
 
 @customElement("hui-thermostat-card")
 export class HuiThermostatCard extends LitElement implements LovelaceCard {
+  private _resizeObserver?: ResizeObserver;
+
+  public connectedCallback(): void {
+    super.connectedCallback();
+    this._attachObserver();
+  }
+
+  public disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this._detachObserver();
+  }
+
+  @query(".container") private _container!: HTMLElement;
+
+  private _attachObserver(): void {
+    if (!this._resizeObserver && this._container) {
+      this._resizeObserver = new ResizeObserver(() => {
+        this._container.style.setProperty(
+          "--height",
+          `${this._container.clientHeight}px`
+        );
+      });
+      this._resizeObserver.observe(this._container);
+    }
+  }
+
+  private _detachObserver(): void {
+    if (this._resizeObserver) {
+      this._resizeObserver.disconnect();
+      this._resizeObserver = undefined;
+    }
+  }
+
   public static async getConfigElement(): Promise<LovelaceCardEditor> {
     await import("../editor/config-elements/hui-thermostat-card-editor");
     return document.createElement("hui-thermostat-card-editor");
@@ -74,6 +107,8 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
   protected updated(changedProps: PropertyValues): void {
     super.updated(changedProps);
 
+    this._attachObserver();
+    
     if (
       !this._config ||
       !this.hass ||
@@ -118,13 +153,15 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
     return html`
       <ha-card>
         <p class="title">${name}</p>
-        <ha-state-control-climate-temperature
-          prevent-interaction-on-scroll
-          .showCurrentAsPrimary=${this._config.show_current_as_primary}
-          show-secondary
-          .hass=${this.hass}
-          .stateObj=${stateObj}
-        ></ha-state-control-climate-temperature>
+        <div class="container">
+          <ha-state-control-climate-temperature
+            prevent-interaction-on-scroll
+            .showCurrentAsPrimary=${this._config.show_current_as_primary}
+            show-secondary
+            .hass=${this.hass}
+            .stateObj=${stateObj}
+          ></ha-state-control-climate-temperature>
+        </div>
         <ha-icon-button
           class="more-info"
           .label=${this.hass!.localize(
@@ -148,10 +185,15 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
 
   static get styles(): CSSResultGroup {
     return css`
-      ha-card {
+      :host {
+        position: relative;
+        display: block;
         height: 100%;
+      }
+      ha-card {
         position: relative;
-        overflow: hidden;
+        height: 100%;
+        width: 100%;
         padding: 0;
         display: flex;
         flex-direction: column;
@@ -170,15 +212,32 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
+        flex: none;
       }
 
-      ha-state-control-climate-temperature {
-        width: 100%;
-        max-width: 344px; /* 12px + 12px + 320px */
-        padding: 0 12px 12px 12px;
+      .container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        overflow: hidden;
+        max-width: 100%;
         box-sizing: border-box;
       }
 
+      .container:before {
+        content: "";
+        display: block;
+        padding-top: 100%;
+      }
+
+      .container > * {
+        padding: 8px;
+        max-width: var(--height, 100%);
+        height: 100%;
+        aspect-ratio: 1 / 1;
+      }
+
       .more-info {
         position: absolute;
         cursor: pointer;
@@ -193,6 +252,7 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
 
       hui-card-features {
         width: 100%;
+        flex: none;
       }
     `;
   }