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

原创 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;









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

相关文章推荐

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

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

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

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

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

div内容水平垂直居中解决方案

微信小程序-image(图片)

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

【微信小程序】image图片控件摆放案例

需要实现的效果                                                          标题         子标题         演员表      ...

微信常用JS接口调用指南

微信JS-SDK 分享到朋友圈 分享给朋友 分享到QQ 拍照或从手机相册中选图 识别音频并返回识别结果 使用微信内置地图查看位置 原文:http://www.cnblogs.com/txw1958/p...

微信小程序开发详解(九)---微信小程序布局基础

1:Flex布局 Flex布局如图1所示 图1 1.1 Flex容器属性 1.2 Flex容器内元素属性

微信小程序页面使内容充满整个屏幕(高度、宽度100%),并使内容水平和竖直都居中

很多时候,我们会希望将内容充满整个屏幕(高度、宽度100%),如下图 代码如下wxml页面代码 购物车竟然是空的...

微信小程序图片实现宽度100%,高度自适应

图片样式设置宽度100%,然后设置高度自适应 .img{   width: 100%; } 然后标签内增加属性 mode="widthFix"...
  • bjstyle
  • bjstyle
  • 2017年08月14日 20:45
  • 1194

微信小程序页面布局

一,微信小程序页面布局方式采用的是Flex布局 1.Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局。 2.Flex布局提供了元素在容器中的对齐,方向...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【知识整理】微信小程序-图片在容器中等比缩放至垂直、水平居中,并计算缩放后真实宽高
举报原因:
原因补充:

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