Skip to content
Permalink
Browse files

perf[PanThumb]: Replace the image tag with background-image to preven…

…t the stretching (#2202)
  • Loading branch information...
mayunhai authored and PanJiaChen committed Jun 6, 2019
1 parent 4bd8f7f commit d3a2b6b34ed2f4ba69b78f2d07483747eb6ea7dd
Showing with 6 additions and 4 deletions.
  1. +6 −4 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,15 +53,16 @@ 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;
transform-origin: 95% 40%;
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;

0 comments on commit d3a2b6b

Please sign in to comment.
You can’t perform that action at this time.