diff --git a/packages/mgt-components/src/components/mgt-person/mgt-person.scss b/packages/mgt-components/src/components/mgt-person/mgt-person.scss
index 054d1d866c..43d455fed5 100644
--- 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
index 70993ce898..620074a246 100644
--- 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>