【知识整理】微信小程序-图片在容器中等比缩放至垂直、水平居中,并计算缩放后真实宽高

原创 2017年07月25日 16:12:34

一.对于微信小程序页面中的图片,官方提供了image组件进行支持。根据官方文档,image组件用法如下:



例:图片水平、垂直居中布局代码如下:

<view style="width:750rpx;height:750rpx;background-color:#000;">
	<image id="img" src="www.xxoo.com/a.jpg" mode="aspectFit" style="width:100%;height:100%;"></image>
</view>
注1:如不了解rpx,请查看开发文档
注2:image组件的mode属性值为aspectFile:保持纵横比缩放图片,使图片的长边能完全显示出来。

1.自此上述代码实现了图片的水平垂直居中效果图如下:

                          
2.有时我们想获取不同设备中已被水平、垂直剧中后图片的实际宽高,最初的想法是使用wx.createSelectorQuery()标签获取image组件的宽高,代码如下:

wx.createSelectorQuery().select('#img').boundingClientRect(function(rects){
	var width = rects.width;
	var height = rects.height;
	console.log('width:' + width + ';' + 'height:' + height);
}).exec();
3.经测试在iphone6下得到width:375px;height:375px;

在iphone6 Plus下得到width:414px;height:414px;

     由此我们知道获取到的是我们设置的image组件的实际宽高,而不是图片的实际宽高。这个想法失败了,没有现成API的支持只好想办法自己实现了。


二.在后台能够给出图片原始宽高的情况下,经过自己考虑及实际验证,(以image组件width:750rpx;height:750rpx;为例),由于image组件的宽高相同,因此图片原图,实际宽/高中较长的那个会充满image组件的宽/高的100%;并以此为比例,对图片进行等比缩放,已使图片在image中水平、垂直居中.


举个栗子:已知图片原始宽度w:200px;原始高度h:400px;高度(400px)>宽度(200px),因此高度会优先占据image组件高度的100%即750rpx;据此我们可以算出图片在设备上的实际宽width,高height。

(1)获取屏幕宽度:

var screenWidth = wx.getSystemInfoSync().screenWidth;
(2)获取图片原始宽高比:
var ratio1 = w / h;
(3)算出相对rpx单位与绝对px单位之间的转换比例:
ratio2 = screenWidth / 750;
(4)计算出缩放后图片绝对px高度:
height = 750 * ratio2;
(5)由于图片缩放为等比缩放,因此原始图片宽高比恒等于缩放后的图片宽高比得到:
ratio1 = width / height;
//由此得出:
width = ratio1 * height;









版权声明:本文为博主原创文章,未经博主允许不得转载。

微信小程序-image(图片)

在微信小程序中,要显示一张图片,有两种图片加载方式: 加载本地图片加载网络图片 加载本地图片 src="/image/arrowright.png" 这句就是加载本地图片资源的。想想iOS...
  • gang544043963
  • gang544043963
  • 2016年10月26日 14:20
  • 72686

微信小程序例子——使用image组件显示图片

微信小程序例子——使用image组件显示图片
  • FutrueJet
  • FutrueJet
  • 2016年10月26日 20:54
  • 18171

微信小程序实现图片放大缩小,并截取指定区域图片

要在小程序中实现图片放大缩小是着实不容易呀,还要把用户选择的指定区域生成图片,简直令人发指。 不多说,上烧鸡(代码) 首先还是先来看看要实现的效果 用户可以在指定的区域中滑动...
  • zhanglir333
  • zhanglir333
  • 2018年01月12日 15:06
  • 102

微信小程序实现图片放大缩小,并截取指定区域图片

要在小程序中实现图片放大缩小是着实不容易呀,还要把用户选择的指定区域生成图片,简直令人发指。不多说,上烧鸡(代码)首先还是先来看看要实现的效果用户可以在指定的区域中滑动,放大,缩小自己的图片,点击确定...
  • yang7789
  • yang7789
  • 2017年12月29日 17:38
  • 552

在小程序中将多个view居中显示

我们在这里要实现的效果是这样的,在小程序中将多个view居中显示 先看一下效果图如下图效果所示:我们需要将 “延长收货”,”查看物流”,“提醒发货”,“提醒发货”是四个按钮放在页面最中间,并且间隔适...
  • qq_24147051
  • qq_24147051
  • 2016年11月25日 14:05
  • 15242

实现任意图片垂直居中的三种方法

在网站开发过程中,可能会有希望图片垂直居中的情况,而且,需要垂直居中的图片的高度也不确定,这就会给页面的布局带来一定的挑战。我总结了一下,曾经使用过的几种方法来使图片垂直居中,除了第一种方法只限于标准...
  • cengjingcanghai123
  • cengjingcanghai123
  • 2014年11月03日 14:25
  • 9211

微信小程序 图片宽高自适应详解

微信小程序 图片宽高自适应 1.以前将小程序图片宽度设置为屏幕宽度: imageLoad: function () { this.setData({ imageWidth: w...
  • jimolangyaleng
  • jimolangyaleng
  • 2017年11月15日 14:44
  • 378

微信小程序3个关于字体和图片的小问题

微信小程序3个关于字体和图片的小问题 01字体自适应居中 代码: view> text>\n\n欢迎来到微信小程序text> view> view{ width: 10...
  • mylovewanzi
  • mylovewanzi
  • 2018年01月15日 13:07
  • 27

图片垂直水平居中的N种方法

div内容水平垂直居中解决方案
  • playboyanta123
  • playboyanta123
  • 2014年10月08日 21:35
  • 3145

WXML节点信息API

wx.createSelectorQuery() 在微信小程序里调用后:返回一个SelectorQuery对象实例。可以在这个实例上使用select等方法选择节点,并使用boundingClient...
  • u010542626
  • u010542626
  • 2017年09月15日 14:02
  • 405
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【知识整理】微信小程序-图片在容器中等比缩放至垂直、水平居中,并计算缩放后真实宽高
举报原因:
原因补充:

(最多只允许输入30个字)