Merge pull request #22 from joshzngf/main

Remove height/width and add aspect ratio and object fit

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
-```
+```

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 {