微信小程序解决圆形头像显示图片不完全问题

最近在做微信小程序，遇到这样一个难题，绘制一个圆形的头像，但是有的图片会因为宽度大于高度而致使图片在圆形区域内显示不全，为解决这个问题，我采用了以下办法，现贴出代码共享给大家，大家如果有更好的解决方案也可以给我留言哦~

XML:<view style="width:130rpx;height:130rpx;border-radius:50%;overflow:hidden;text-align:center;display:flex;justify-content: center; align-items: center"><image src="{{headImgUrl}}"  style="width:70px;height:{{txHeight}}px" bindload='imageLoad2'></image></view>JS:imageLoad2: function (e) {var imgwidth = e.detail.widthvar  imgheight = e.detail.heightvar ratio = imgwidth / imgheightvar viewHeight = 70/ ratio;if (viewHeight < 70){this.setData({txHeight: 70,})}else{this.setData({txHeight: viewHeight,})}}

思路总结：

给图片设置固定的宽度后，根据宽和高的比例进行缩放计算出正常缩放下的高度，如果改高度小于设置的高度，就让要显示的他高度显示为设置的高度，否则就正常显示缩放后的高度。特意把设置的固定图片宽度设置一个大于外部圆框的宽度数值，且让图片居中显示，防止漏出图片边缘。

微信小程序解决圆形头像显示图片不完全问题相关推荐

微信小程序使用image组件显示图片的方法
本文实例讲述了微信小程序使用image组件显示图片的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml 代码如下: <image style=" ...
java drawimage图片不完整_微信小程序canvas.drawImage完全显示图片问题的解决
问题描述问题产生对于微信小程序,canvas处理过程中,dramImage默认图片引用是有残缺的导入初始项目打开链接(原官网例子),浏览器唤醒微信开发这工具,打开连接之前需要下载好微信开发者工 ...
微信小程序使用wxparse，显示图片的相对路径问题
微信小程序使用wxparse,有一个问题,就是我们在网页后台编辑器里面的图片如果上传的时候采用了相对路径,在wxparse里就不能正常显示,但是,如果在编辑器里直接上传成绝对的网络地址路径之后,如果万 ...
微信小程序真机不显示图片【三个解决方案】
今天网友在开发小程序中遇见一个很奇怪的问题,就是编辑器编译后可以正常显示项目图片,但是当真机预览时却不显示图片.针对这个问题经过对比.尝试算是找到了问题的原因.下面将最近真机不显示的情况进行一下汇总: ...
微信小程序解决时间只显示年月日的问题（手机端显示NAN-NAN-NAN）
const iosTime=(date)=>{date = new Date(date.replace(/-/g, "/"));let year = date.getFull ...
微信小程序：想要点击图片时进行一个放大的功能，写完之后可以正常显示，但点击时图片加载不出来，在此想问一下各路大神有没有解决办法
微信小程序:想要点击图片时进行一个放大的功能,写完之后可以正常显示,但点击时图片加载不出来,在此想问一下各路大神有没有解决办法 wxml: 在这里插入代码片 <view class='zhanp ...
微信小程序使用image组件时图片不显示的一个解决方法
第一次写博客: 图片链接可正常访问,但是使用组件时,图片不显示,偶然之间尝试到了一种解决方法,我使用的是微信小程序云端,读取本地图片时使用了具体的路径,错误用法如下如果按照指示\ 一级一级选下来,导 ...
微信小程序苹果手机边框1rpx显示不全解决办法
微信小程序苹果手机边框1rpx显示不全,加上transform: rotateZ(360deg) .address-map{width: 125rpx;height: 36rpx;line-heigh ...
微信小程序，动态改变背景图片
前言,作为开发新人,最近在学习微信小程序,期间遇到不少问题,对问题的解决的方法进行记录,以供学习之用. 关于微信小程序的背景图片问题, 1.微信小程序不能使用本地的图片设置背景图片,即 <vie ...

微信小程序解决圆形头像显示图片不完全问题

微信小程序解决圆形头像显示图片不完全问题相关推荐

最新文章

热门文章

微信小程序 解决圆形头像显示图片不完全问题

微信小程序 解决圆形头像显示图片不完全问题相关推荐

最新文章

热门文章

微信小程序解决圆形头像显示图片不完全问题

微信小程序解决圆形头像显示图片不完全问题相关推荐