fix(avatar): fill image when its not square (#479) (#498)

close #479
globalbrain · Mar 12, 2024 · ee99078 · ee99078
1 parent 4891f28
commit ee99078
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/lib/components/SAvatar.vue b/lib/components/SAvatar.vue
@@ -44,6 +44,8 @@ const initial = computed(() => props.name?.charAt(0).toUpperCase())
 
 .img {
   object-fit: cover;
+  height: 100%;
+  width: 100%;
 }
 
 .initial {

diff --git a/stories/components/SAvatar.01_Playground.story.vue b/stories/components/SAvatar.01_Playground.story.vue
@@ -23,9 +23,9 @@ const variants = [
             {{ v.title }}
           </div>
           <div class="flex flex-wrap gap-16">
-            <SAvatar :size="v.size" avatar="https://avatars.githubusercontent.com/u/3753672?v=4" />
-            <SAvatar :size="v.size" avatar="https://avatars.githubusercontent.com/u/62658104?v=4" />
-            <SAvatar :size="v.size" avatar="https://avatars.githubusercontent.com/u/16436160?v=4" />
+            <SAvatar :size="v.size" avatar="https://github.com/kiaking.png" />
+            <SAvatar :size="v.size" avatar="https://github.com/ryo-gk.png" />
+            <SAvatar :size="v.size" avatar="https://github.com/NozomuIkuta.png" />
             <SAvatar :size="v.size" name="John Doe" />
             <SAvatar :size="v.size" name="Anna Green" />
             <SAvatar :size="v.size" name="George Walsh" />