微信小程序动态设置图片高宽详解及示例代码

更新时间：2017年2月24日 09:34:47 作者：唯有预见，方能相遇

本文主要介绍微信小程序中动态设置图片高宽的详细讲解和示例代码。有需要的朋友可以参考一下。

微信小程序图片按比例缩放，动态获取图片的高度和宽度，动态设置图片的高度和宽度。

前言：

在小程序的布局中，如果图片不是固定的高度和高度，而是设置了固定的高度和宽度，并且原图片没有相对于设置的固定高度和宽度按比例大小，那么图片将被变形和改变。不清楚。这时，可以使用下面的比例缩放方法来缩放图像，使图像不变形。或者通过方法动态获取图像的高度和宽度，并动态设置图像的高度和宽度，使图像布局的高度和宽度等于原始图像的高度和宽度。

1.图像缩放工具

//Util.js class Util{ /*** * 按照显示图片的宽等比例缩放得到显示图片的高 * @params originalWidth 原始图片的宽 * @params originalHeight 原始图片的高 * @params imageWidth 显示图片的宽，如果不传就使用屏幕的宽 * 返回图片的宽高对象 ***/ static 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; } /*** * 按照显示图片的高等比例缩放得到显示图片的宽 * @params originalWidth 原始图片的宽 * @params originalHeight 原始图片的高 * @params imageHeight 显示图片的高，如果不传就使用屏幕的高 * 返回图片的宽高对象 ***/ static imageZoomWidthUtil(originalWidth,originalHeight,imageHeight){ let imageSize = {}; if(imageHeight){ imageSize.imageWidth = (imageHeight *originalWidth) / originalHeight; imageSize.imageHeight = imageHeight; }else{//如果没有传imageHeight,使用屏幕的高 wx.getSystemInfo({ success: function (res) { imageHeight = res.windowHeight; imageSize.imageWidth = (imageHeight *originalWidth) / originalHeight; imageSize.imageHeight = imageHeight; } }); } return imageSize; } }

export default Util;

2.使用组件加载图片，动态获取图片的高宽，动态设置.wxml的高宽（../pro.png为本地图片）

.js

import Util from '../common/Util'; Page({ data:{ imageWidth:0, imageHeight:0 }, imageLoad: function (e) { //获取图片的原始宽度和高度 let originalWidth = e.detail.width; let originalHeight = e.detail.height; //let imageSize = Util.imageZoomHeightUtil(originalWidth,originalHeight); //let imageSize = Util.imageZoomHeightUtil(originalWidth,originalHeight,375); let imageSize = Util.imageZoomWidthUtil(originalWidth,originalHeight,145); this.setData({imageWidth:imageSize.imageWidth,imageHeight:imageSize.imageHeight}); } })

微信小程序图片按比例缩放，动态获取图片的高度和宽度，动态设置图片的高度和宽度。

感谢您的阅读，希望对大家有所帮助，也感谢您对本站的支持！