小程序
小游戏
企业微信
微信支付
扫描小程序码分享
因为图片太长影响了浏览,所以采用aspectFit缩放模式,但是图片却无法居左展示,有大佬有解决方案吗?
1 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
可以获取图片的实际宽高,高度要是超出最大,就显示为最大高度,宽度不设置自适应
示例
https://www.jb51.net/article/106605.htm
<image style="height: {{item.imageHeight>height?height+'px':item.imageHeight+'px'}};width: {{item.imageHeight>height?'':item.imageHeight==height?'100%':'100%'}}" mode="{{(item.imageHeight>375 || item.imageHeight==375)?'aspectFit':''}}" src="{{item.image}}" bindload="imageLoad" data-item="{{item}}" data-index="{{index}}" data-indexs="{{indexs}}" />
height:wx.getSystemInfoSync().windowWidth*1, imageLoad(e) { const index = e.currentTarget.dataset['index']; const indexs = e.currentTarget.dataset['indexs']; //获取图片的原始宽度和高度 let originalWidth = e.detail.width; let originalHeight = e.detail.height; let imageSize = util.imageZoomHeightUtil(originalWidth,originalHeight); let imageHeight = `cookbooklist[${indexs}].cookbooklist[0][${index}].imageHeight`; let height=(imageSize && imageSize.imageHeight)?imageSize.imageHeight.toFixed(0):''; this.setData({ [imageHeight]:height, }) }, util.imageZoomHeightUtil function imageZoomHeightUtil(originalWidth,originalHeight,imageWidth){ let imageSize = {}; if(imageWidth){ imageSize.imageWidth = imageWidth; imageSize.imageHeight = (imageWidth * originalHeight) / originalWidth; }else{//如果没有传imageWidth,使用屏幕的宽 wx.getSystemInfo({ success: function (res) { imageWidth = res.windowWidth; imageSize.imageWidth = imageWidth; imageSize.imageHeight = (imageWidth * originalHeight) / originalWidth; } }); } return imageSize; }
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
可以获取图片的实际宽高,高度要是超出最大,就显示为最大高度,宽度不设置自适应
示例
https://www.jb51.net/article/106605.htm
<image style="height: {{item.imageHeight>height?height+'px':item.imageHeight+'px'}};width: {{item.imageHeight>height?'':item.imageHeight==height?'100%':'100%'}}" mode="{{(item.imageHeight>375 || item.imageHeight==375)?'aspectFit':''}}" src="{{item.image}}" bindload="imageLoad" data-item="{{item}}" data-index="{{index}}" data-indexs="{{indexs}}" />
height:wx.getSystemInfoSync().windowWidth*1, imageLoad(e) { const index = e.currentTarget.dataset['index']; const indexs = e.currentTarget.dataset['indexs']; //获取图片的原始宽度和高度 let originalWidth = e.detail.width; let originalHeight = e.detail.height; let imageSize = util.imageZoomHeightUtil(originalWidth,originalHeight); let imageHeight = `cookbooklist[${indexs}].cookbooklist[0][${index}].imageHeight`; let height=(imageSize && imageSize.imageHeight)?imageSize.imageHeight.toFixed(0):''; this.setData({ [imageHeight]:height, }) }, util.imageZoomHeightUtil function imageZoomHeightUtil(originalWidth,originalHeight,imageWidth){ let imageSize = {}; if(imageWidth){ imageSize.imageWidth = imageWidth; imageSize.imageHeight = (imageWidth * originalHeight) / originalWidth; }else{//如果没有传imageWidth,使用屏幕的宽 wx.getSystemInfo({ success: function (res) { imageWidth = res.windowWidth; imageSize.imageWidth = imageWidth; imageSize.imageHeight = (imageWidth * originalHeight) / originalWidth; } }); } return imageSize; }