微信小程序图片等比缩放显示正中间
这是小程序 image标签的mode ,对图片的缩放做的处理
- 缩放 scaleToFill 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
- 缩放 aspectFit 保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
- 缩放 aspectFill 保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
- 缩放 widthFix 宽度不变,高度自动变化,保持原图宽高比不变
但是这里的处理无法在一个固定框里显示图片的正中间
图片完整的显示并且置于固定框内正中间
主要代码
let originalWidth = e.detail.width;
let originalHeight = e.detail.height;
var mariginTopSize = 0;
var mariginLeftSize = 0;
let imageSize = ImgUtil.imageZoomWidthUtil(originalWidth, originalHeight, 180);
//按高度180缩放 180像素是根据自己项目的框固定的高度
//如果图片宽度没有大于屏幕宽度
if (imageSize.imageWidth < this.data.screenWidth) {
//向上偏移
imageSize = ImgUtil.imageZoomHeightUtil(originalWidth, originalHeight, this.data.screenWidth);
mariginTopSize = -(imageSize.imageHeight - 180) / 2;
} else {
//向左偏移
mariginLeftSize = -(imageSize.imageWidth - this.data.screenWidth) / 2;
}
开源项目:https://github.com/xiezhouhuang/Image-center-alignment
微信小程序图片等比缩放显示正中间相关推荐
- 微信小程序图片自适应宽高比例显示解决方法
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 解决方案一:写固定宽度,然后使用 image 组件中 mode 属性的 widthFix : 先看效果 ...
- 微信小程序图片在不同设备显示保持图片比例并且居中
最近都在开发微信小程序,碰到一个这样的问题,就是图片在不同尺寸手机要求不被压缩(长宽之比不变),并且上下左右居中,效果图如下(左iPhone 7Plus,中iPhone 7,右iPhone X): 刚 ...
- 微信小程序图片按比例自适应显示
小程序的图片默认大小为320px*240px,有时候需求要显示多张图片(每张图片的规格不一致)自适应屏幕的宽,不失真.这时候你第一反应肯定是写:widht:100%;hegiht:auto;很遗憾地告 ...
- 微信小程序 图片等比例缩放(图片自适应屏幕)
index.wxml <!--图片宽高大于屏幕宽高--> <image style="width: {{imagewidth}}px; height: {{imagehei ...
- 微信小程序图片全屏预览组件,并解决svg真机显示黑屏问题
自己码了个微信小程序图片全屏预览组件,并解决了svg真机显示黑屏问题(即png等格式可以正常显示,但就svg无法显示). /*** 微信小程序图片预览组件* 1.支持预览svg.png.jpeg.jp ...
- 关于微信小程序图片不显示的问题解决方案
关于微信小程序图片不显示的问题解决方案 经过查阅资料发现如下文档导致图片不显示: 1.本地图片是用image加载的:src="../../../images/ic_header.jpg&qu ...
- 微信小程序图片裁剪插件image-cropper
image-cropper 一款高性能的微信小程序图片裁剪插件,支持旋转.设置尺寸 功能亮点 1.支持旋转支持旋转支持旋转. 2.性能超高超流畅,大图毫无卡顿感. 3.可以设置导出图片尺寸. 4.自由 ...
- 微信小程序图片(头像)裁剪工具we-cropper含2d版-完整版
微信小程序图片(头像)裁剪工具we-cropper含2d版-完整版 本教程基于 we-cropper v1.4.0,非本人同意禁止任何形的转载 we-cropper官方下载链接 效果图 一.非2d版 ...
- 小程序 图片上传php后台,微信小程序图片选择、上传到服务器、预览(PHP)实现实例...
微信小程序图片选择.上传到服务器.预览(php)实现实例 小程序实现选择图片.预览图片.上传到开发者服务器上 后台使用的tp3.2 图片上传 请求时候的header参考时可以去掉(个人后台验证权限使用 ...
最新文章
- LeetCode简单题之拆炸弹
- 泛华金控携手神策数据,赋能保险经代公司筑就全闭环智能营销
- 代码整洁之道--思维导图
- 腾讯智慧校园 php,河南省电化教育馆召开全省“腾讯智慧校园”试点工作推进会...
- clock函数,计算程序运行时间
- 机器学习基础(十九)—— Trick
- 在Qsys中创建用户自定义IP
- 【专题】CSDN下载频道3月热门资源top100汇总
- 学校邮箱的pop服务器地,常用邮箱的POP与SMTP服务器
- Pytorch对梯度进行rescale
- 网站域名有哪些不同的种类?
- 痛心,京东程序员删库跑路获刑!
- 服务器常见高可用方案
- 我的生活所感悟出的杂句
- 彼时彼刻恰似此时此刻
- 【自由随想录(二)】
- 将你的 Python 脚本转换为命令行程序
- 解决mac下adb无法找到手机
- [论文阅读:姿态识别Transformer] POET: End-to-End Trainable Multi-Instance Pose Estimation with Transformers
- 二叉树算法大总结:借助遍历的题型+需要借助递归返回多个信息的题型[本质:遍历]