用background替代img,防止图片变形

This commit is contained in:
马云海 mayunhai () 2019-06-06 17:00:31 +08:00
parent 08e64566ce
commit e6bd49b665
1 changed files with 4 additions and 2 deletions
src/components/PanThumb

View File

@ -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;