fix(avatar): object fit to properly handle non-squared images (#4298)

* fix(avatar): object fit to properly handle non-squared images * chore(avatar): add non square aspect ratio story --------- Co-authored-by: Maksim Nedoshev <m0ksem1337@gmail.com>
epicmaxco · Jun 3, 2024 · 69a3202 · 69a3202
1 parent 6bd8ea7
commit 69a3202
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 0 deletions.
diff --git a/packages/ui/src/components/va-avatar/VaAvatar.stories.ts b/packages/ui/src/components/va-avatar/VaAvatar.stories.ts
@@ -103,6 +103,14 @@ export const Square = () => ({
   `,
 })
 
+/** Must be centered image */
+export const NonSquareAspectRation = () => ({
+  components: { VaAvatar },
+  template: `
+    <VaAvatar src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_light_color_272x92dp.png" />
+  `,
+})
+
 export const Loading = () => ({
   components: { VaAvatar },
   template: '<VaAvatar loading/>',

diff --git a/packages/ui/src/components/va-avatar/VaAvatar.vue b/packages/ui/src/components/va-avatar/VaAvatar.vue
@@ -142,6 +142,7 @@ defineExpose({
 
   img,
   svg {
+    object-fit: var(--va-avatar-object-fit);
     border-radius: inherit;
     display: inline-flex;
     height: inherit;

diff --git a/packages/ui/src/components/va-avatar/_variables.scss b/packages/ui/src/components/va-avatar/_variables.scss
@@ -9,4 +9,5 @@
   --va-avatar-position: relative;
   --va-avatar-line-height: normal;
   --va-avatar-border-radius: 50%;
+  --va-avatar-object-fit: cover;
 }