mpvue小程序中图片根据自身宽高做自适应

版权声明:原创文章,未经允许不得转载!!! https://blog.csdn.net/halo1416/article/details/83504677

需求:小程序因为自身上传包大小的限制(每个包2M,使用分包总共可以上传8M),所以小程序的静态资源主要是放在服务器端(主要是图片资源)。但是从服务器获取图片时有可能出现下面一种情况:

返回的是图片的url地址,但并没有图片自身的宽高  ==>>  导致结果:无法根据图片的宽高和屏幕宽度,计算得出图片的高度,从而给图片做自适应。

计算高度的方法:图片自身宽度 / 图片自身高度 = 屏幕中图片宽度 / 屏幕中图片高度      ==>>  即利用图片的宽高比

解决方法: 

1. 利用微信小程序API   wx.getImageInfo   获取图片的信息;

从返回的数据中获取到图片的宽高。

2. 根据图片自身的宽高和屏幕的宽度, 计算图片的高度。从而实现图片的自适应。

文章仅为本人学习过程的一个记录,仅供参考,如有问题,欢迎指出!

猜你喜欢

转载自blog.csdn.net/halo1416/article/details/83504677
今日推荐