Vue项目 头像处理方案

个人思路

获取后台返回头像url，判断图片宽度，高度。

如果宽度>高度， 使其高度填充盒子 两边留白。

如果宽度<高度，使得宽度填充盒子 上下留白。

效果图：

缺陷：懒加载图片 会出现闪烁

 

代码实现

.heads
   width 1.04rem
   height 1.04rem
   border-radius 50%
   overflow hidden
   text-align center
   background #e8e8e8
   margin 0 .34rem .3rem 0
   line-height 1.04rem
   img
     width 100%

<template>

   // 外面要给一个div并且限制宽度和高度，text-align center，overflow hidden
   <div class="head">
       // userInfoList.avatar 是后台返回给我的头像URL
       <img v-lazy="userInfoList.avatar" id="userhead" alt=