小程序中图片高度等比缩放
小程序中图片高度等比缩放
连胜
发布于 2018-03-07 10:36:41
发布于 2018-03-07 10:36:41
代码可运行
运行总次数：0
代码可运行
前言：小程序中的image组件，有默认的宽度(320px)和高度(240px)，如果想让图片按比例显示，那就需要自己设置宽度 & 高度。今天来说一下图片等比缩放的实现。
bindload中处理
✦✦01✦✦
WXML代码：
<view class='main-content' wx:for="{{detail.content}}">
<image src="{{item.img}}" class="img" bindload='imgLoad' style='height: {{item.height}}rpx;' data-index="{{index}}"/>
<text class='content' selectable='true'>{{item.desc}}</text>
</view>在bindload中去计算图片的高度。
JS代码：
imgLoad: function (e) {
var index = e.currentTarget.dataset.index;
var detail = this.data.detail;
var height = Math.ceil(e.detail.height * 750 / e.detail.width);
detail.content[index].height = height;
this.setData({
detail: detail
})
}等比缩放图片已经搞定~
mode设置为widthFix
✦✦02✦✦
仔细查看官方文档：mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。
widthFix模式：宽度不变，高度自动变化，保持原图宽高比不变
看一下效果：
<image src='1.jpg' mode='widthFix'></image>
<image src='1.jpg'></image>
和第一种的实现效果是一样的，用这种方式就不用JS计算了，省去了不少代码，很实用。
然后特意去查了一下，widthFix这个值是在 0.11.122100 版本中更新的，确实要多看文档了~
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2017-10-17，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
