zhouchijian
/
fe-drone-ci
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

perf[PanThumb]: Replace the image tag with background-image to prevent the stretching (#2202)

This commit is contained in:
MaYuanhai 2019-06-06 17:46:00 +08:00 committed by 花裤衩
parent 4bd8f7f670
commit d3a2b6b34e
1 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/PanThumb/index.vue
View File

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