From 1da5c4bb29142652ff14e1cece62250ccd1536e1 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Wed, 24 Apr 2019 17:06:11 +0200
Subject: [PATCH] Use background image instead of img

---
 client/src/components/profile/Avatar.vue | 38 +++++++++++++++---------
 1 file changed, 24 insertions(+), 14 deletions(-)

diff --git a/client/src/components/profile/Avatar.vue b/client/src/components/profile/Avatar.vue
index ce99752e..6a943d11 100644
--- a/client/src/components/profile/Avatar.vue
+++ b/client/src/components/profile/Avatar.vue
@@ -4,8 +4,9 @@
       <user-icon v-show="!isAvatarLoaded" class="avatar__placeholder" :class="{'avatar__placeholder--highlighted': iconHighlighted}"></user-icon>
     </transition>
     <transition name="show">
-      <img v-show="isAvatarLoaded" class="avatar__image" :class="{'avatar__image--landscape': landscape}" :src="avatarUrl" ref="avatarImage" />
+      <div v-show="isAvatarLoaded" class="avatar__image" ref="avatarImage" :style="{'background-image': `url(${this.avatarUrl})`}"></div>
     </transition>
+    <img class="avatar__fake-image" :src="avatarUrl" ref="fakeImage"/>
   </div>
 </template>
 
@@ -18,14 +19,13 @@
     components: {UserIcon},
     data () {
       return {
-        isAvatarLoaded: false,
-        landscape: false
+        isAvatarLoaded: false
       }
     },
     mounted () {
       if (this.avatarUrl !== '') {
-        this.$refs.avatarImage.addEventListener('load', () => {
-          this.landscape = this.$refs.avatarImage.naturalHeight < this.$refs.avatarImage.naturalWidth;
+        this.$refs.fakeImage.addEventListener('load', () => {
+          this.$refs.fakeImage.remove();
           this.isAvatarLoaded = true;
         });
       };
@@ -44,8 +44,6 @@
     overflow: hidden;
     text-align: center;
     border-radius: 50%;
-    // clip-path: circle(40%);
-    position: relative;
 
     &__placeholder {
       height: $max-width;
@@ -57,19 +55,31 @@
     }
 
     &__image {
-      position: absolute;
-      width: $max-width;
-      height: auto;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
 
-      &--landscape {
+    background-size: cover;
+    background-position: center center;
+    height: 100%;
+    width: 100%;
+    border: 0;
+
+    // position: absolute;
+    // width: $max-width;
+    // height: auto;
+    // top: 50%;
+    // left: 50%;
+    // transform: translate(-50%, -50%);
+
+    &--landscape {
         width: auto;
         height: $max-width;
       }
     }
 
+    &__fake-image {
+      width: 0;
+      height: 0;
+    }
+
      .fade-leave-active, .show-enter-active {
       transition: opacity .5s;
     }