fix person image stretch

microsoftgraph · Jan 24, 2024 · fbc1734 · fbc1734
1 parent e79fbdc
commit fbc1734
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/packages/mgt-components/src/components/mgt-person/mgt-person.scss b/packages/mgt-components/src/components/mgt-person/mgt-person.scss
@@ -192,6 +192,8 @@ $person-line4-text-line-height: var(--person-line4-text-line-height, 16px);
         border: $person-avatar-border;
         border-radius: $person-avatar-border-radius;
         margin-block-start: $person-avatar-top-spacing;
+        object-fit: cover;
+        object-position: center top;
       }
 
       .initials,

diff --git a/stories/components/person/person.properties.stories.js b/stories/components/person/person.properties.stories.js
@@ -70,6 +70,10 @@ export const changeUserId = () => html`
   </script>
   `;
 
+export const personImage = () => html`
+  <mgt-person person-query="me" view="fourLines" fetch-image person-image="https://images.pexels.com/photos/1542085/pexels-photo-1542085.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"></mgt-person>
+  `;
+
 export const personFallbackDetails = () => html`
    <div class="example">
    <mgt-person person-query="mbowen" view="twoLines" show-presence fallback-details='{"displayName":"Megan Bowen"}'></mgt-person>