diff --git a/packages/fuselage/src/components/Avatar/index.js b/packages/fuselage/src/components/Avatar/index.js index e730ba5435..053cad5292 100644 --- a/packages/fuselage/src/components/Avatar/index.js +++ b/packages/fuselage/src/components/Avatar/index.js @@ -8,6 +8,7 @@ export function Avatar({ title, size = 'x36', rounded = false, + objectFit = false, url, ...props }) { @@ -20,6 +21,7 @@ export function Avatar({ const innerClass = [ 'rcx-avatar__element', rounded && 'rcx-avatar__element--rounded', + objectFit && 'rcx-avatar__element--object-fit', size && `rcx-avatar--${size}`, ] .filter(Boolean) diff --git a/packages/fuselage/src/components/Avatar/styles.scss b/packages/fuselage/src/components/Avatar/styles.scss index e345141512..15ddde69a1 100644 --- a/packages/fuselage/src/components/Avatar/styles.scss +++ b/packages/fuselage/src/components/Avatar/styles.scss @@ -19,6 +19,10 @@ $sizes: 16, 18, 20, 24, 28, 32, 36, 40, 48, 124, 200, 332; &--rounded { border-radius: 100%; } + + &--object-fit { + object-fit: contain; + } } &-stack {