From 677f3588d271f9a3fdf5b4108c53a55ae29120d7 Mon Sep 17 00:00:00 2001 From: Joshua Chuang Date: Thu, 23 Jan 2025 09:47:11 -0800 Subject: [PATCH 1/5] Remove height/width and add aspect ratio and object fit --- media-source-image-card.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/media-source-image-card.js b/media-source-image-card.js index 604cc08..6b35e17 100644 --- a/media-source-image-card.js +++ b/media-source-image-card.js @@ -24,10 +24,9 @@ class MediaSourceImageCard extends HTMLElement { img { display: block; - max-width: ${this.config.width ? this.config.width : '100%'}; - max-height: ${this.config.height ? this.config.height : '100%'}; - width: 100%; - height: 100%; + max-width: 100%; + aspect-ratio: ${this.config.aspect_ratio ? this.config.aspect_ratio : '1.9'}; + object-fit: ${this.config.object_fit ? this.config.object_fit : 'contain'} ; } img.off { From 8574deca7f68452cdf000873bb1cd91c2d1d5276 Mon Sep 17 00:00:00 2001 From: Joshua Chuang Date: Thu, 23 Jan 2025 10:02:15 -0800 Subject: [PATCH 2/5] Update README.md --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 8330b29..c8ef557 100644 --- a/README.md +++ b/README.md @@ -51,8 +51,8 @@ This card is quite simple so there are only a few options: | ---- | ---- | ------- | ----------- | | type | string | `custom:media-source-image-card` | **REQUIRED** | | image | string | | **REQUIRED** The path to the image in media source format. i.e: media-source://media_source/local/my_image.jpg | -| width | string | '100%' | Image width | -| height | string | '100%' | Image height | +| aspect_ratio | number | '1.9' | Image aspect ratio | +| object_fit | string | 'contain' | The CSS object-fit property for resizing and fitting the image. Possible values are: `cover`, `contain`, `fill`, etc. | | entity_id | string | | The entity you want to toggle when card is clicked | | apply_grayscale | boolean | | If `true` applies a grayscale on the image when entity is `off` | | forced_refresh_interval | integer | | Number of seconds to force an image refresh | @@ -195,4 +195,4 @@ tap_action: service: input_boolean.turn_on target: entity_id: input_boolean.boolean_test -``` \ No newline at end of file +``` From 2792c0177b84525016ff6dece7b812c8f172d7a4 Mon Sep 17 00:00:00 2001 From: Joshua Chuang Date: Thu, 23 Jan 2025 10:19:30 -0800 Subject: [PATCH 3/5] object-position --- media-source-image-card.js | 1 + 1 file changed, 1 insertion(+) diff --git a/media-source-image-card.js b/media-source-image-card.js index 6b35e17..fc47e27 100644 --- a/media-source-image-card.js +++ b/media-source-image-card.js @@ -27,6 +27,7 @@ class MediaSourceImageCard extends HTMLElement { max-width: 100%; aspect-ratio: ${this.config.aspect_ratio ? this.config.aspect_ratio : '1.9'}; object-fit: ${this.config.object_fit ? this.config.object_fit : 'contain'} ; + object-position: ${this.config.object_position ? this.config.object_position : '50% 50%'} ; } img.off { From dd6e48f4bf3d4c8592a646e3388d448233834b39 Mon Sep 17 00:00:00 2001 From: Joshua Chuang Date: Thu, 23 Jan 2025 10:20:28 -0800 Subject: [PATCH 4/5] Update README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index c8ef557..b798799 100644 --- a/README.md +++ b/README.md @@ -53,6 +53,7 @@ This card is quite simple so there are only a few options: | image | string | | **REQUIRED** The path to the image in media source format. i.e: media-source://media_source/local/my_image.jpg | | aspect_ratio | number | '1.9' | Image aspect ratio | | object_fit | string | 'contain' | The CSS object-fit property for resizing and fitting the image. Possible values are: `cover`, `contain`, `fill`, etc. | +| object_position | string | '50% 50%' | The CSS object-position property for placing the image. | | entity_id | string | | The entity you want to toggle when card is clicked | | apply_grayscale | boolean | | If `true` applies a grayscale on the image when entity is `off` | | forced_refresh_interval | integer | | Number of seconds to force an image refresh | From 42d2bd45749a98aa13391027b403e95d31312370 Mon Sep 17 00:00:00 2001 From: Joshua Chuang Date: Thu, 23 Jan 2025 17:29:30 -0800 Subject: [PATCH 5/5] Move aspect ratio to card --- media-source-image-card.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/media-source-image-card.js b/media-source-image-card.js index fc47e27..6bac930 100644 --- a/media-source-image-card.js +++ b/media-source-image-card.js @@ -13,6 +13,7 @@ class MediaSourceImageCard extends HTMLElement { ha-card { overflow: hidden; height: 100%; + aspect-ratio: ${this.config.aspect_ratio ? this.config.aspect_ratio : '1.9'}; display: flex; align-content: center; justify-content: center; @@ -24,8 +25,7 @@ class MediaSourceImageCard extends HTMLElement { img { display: block; - max-width: 100%; - aspect-ratio: ${this.config.aspect_ratio ? this.config.aspect_ratio : '1.9'}; + width: 100%; object-fit: ${this.config.object_fit ? this.config.object_fit : 'contain'} ; object-position: ${this.config.object_position ? this.config.object_position : '50% 50%'} ; }