diff --git a/README.md b/README.md index 8330b29..b798799 100644 --- a/README.md +++ b/README.md @@ -51,8 +51,9 @@ 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. | +| 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 | @@ -195,4 +196,4 @@ tap_action: service: input_boolean.turn_on target: entity_id: input_boolean.boolean_test -``` \ No newline at end of file +``` diff --git a/media-source-image-card.js b/media-source-image-card.js index 604cc08..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,10 +25,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%; + 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 {