可以获取图片的实际宽高,高度要是超出最大,就显示为最大高度,宽度不设置自适应 示例 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; }
image组件如何aspectFit如何去掉留白?[图片] 因为图片太长影响了浏览,所以采用aspectFit缩放模式,但是图片却无法居左展示,有大佬有解决方案吗?
2023-06-14可以获取图片的实际高度要是超出最大,就显示为最大高度,宽度不设置自适应 示例 https://www.jb51.net/article/106605.htm
小程序 image 组件样式不支持设置 width: auto,- 当前 Bug 的表现(可附上截图) wxss 不能设置图片宽高自动 width: auto, 其中 width,height 一个设置 auto 就会造成图片不显示,因为很多情况下我们只会设置图片的高度一样,让宽度自动缩放,但是不能设置 auto 属性 - 预期表现 image 组件能够支持 wxss 设置 width,height 的属性值为 auto - 复现路径 - 提供一个最简复现 Demo\ <image style="width: 54rpx; auto;margin-left: 20rpx; margin-right: 20rpx" src=' http://58.68.234.140:6677/pemicon/1539673680890.png '></image>
2023-06-14