From cafdbf41f2da6d49ec86ba418f7d0888693f4a13 Mon Sep 17 00:00:00 2001
From: MaYuanhai <414199639@qq.com>
Date: Thu, 6 Jun 2019 17:46:00 +0800
Subject: [PATCH] perf[PanThumb]: Replace the image tag with background-image
 to prevent the stretching (#2202)

---
 src/components/PanThumb/index.vue | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/PanThumb/index.vue b/src/components/PanThumb/index.vue
index de6940ad..1bcf4170 100644
--- a/src/components/PanThumb/index.vue
+++ b/src/components/PanThumb/index.vue
@@ -5,7 +5,8 @@
         <slot />
       </div>
     </div>
-    <img :src="image" class="pan-thumb">
+    <!-- eslint-disable-next-line -->
+    <div :style="{backgroundImage: `url(${image})`}" class="pan-thumb"></div>
   </div>
 </template>
 
@@ -52,7 +53,8 @@ export default {
 .pan-thumb {
   width: 100%;
   height: 100%;
-  background-size: 100%;
+  background-position: center center;
+  background-size: cover;
   border-radius: 50%;
   overflow: hidden;
   position: absolute;
@@ -60,7 +62,7 @@ export default {
   transition: all 0.3s ease-in-out;
 }
 
-.pan-thumb:after {
+/* .pan-thumb:after {
   content: '';
   width: 8px;
   height: 8px;
@@ -71,7 +73,7 @@ export default {
   margin: -4px 0 0 -4px;
   background: radial-gradient(ellipse at center, rgba(14, 14, 14, 1) 0%, rgba(125, 126, 125, 1) 100%);
   box-shadow: 0 0 1px rgba(255, 255, 255, 0.9);
-}
+} */
 
 .pan-info {
   position: absolute;