diff --git a/fixtures/wide.jpg b/fixtures/wide.jpg new file mode 100644 index 000000000..815cab685 Binary files /dev/null and b/fixtures/wide.jpg differ diff --git a/stylesheets/components/Avatar.scss b/stylesheets/components/Avatar.scss index ed68e2f35..3537095f1 100644 --- a/stylesheets/components/Avatar.scss +++ b/stylesheets/components/Avatar.scss @@ -29,6 +29,7 @@ } &__image { + background-position: center center; background-size: cover; display: flex; height: 100%; diff --git a/ts/components/Avatar.stories.tsx b/ts/components/Avatar.stories.tsx index 11bd51d98..0c3cd7abc 100644 --- a/ts/components/Avatar.stories.tsx +++ b/ts/components/Avatar.stories.tsx @@ -64,6 +64,14 @@ story.add('Avatar', () => { return sizes.map(size => ); }); +story.add('Wide image', () => { + const props = createProps({ + avatarPath: '/fixtures/wide.jpg', + }); + + return sizes.map(size => ); +}); + story.add('One-word Name', () => { const props = createProps({ title: 'John',