1、wxml

<!--图片宽高大于屏幕宽高-->
<image style="width: {{imagewidth}}px; height: {{imageheight}}px;" src="{{imageSrc}}" bindload="imageLoad"></image>

2、wx.js

<!--图片宽高大于屏幕宽高-->
Page({data: {imageSrc: 'http://bpic.588ku.com/back_pic/00/03/85/1656205138bbe2d.png',//图片链接imagewidth: 0, // 缩放后的宽imageheight: 0, // 缩放后的高},onLoad: function () {},imageLoad: function (e) {var imageSize = this.imageUtil(e)this.setData({imagewidth: imageSize.imageWidth,imageheight: imageSize.imageHeight})},imageUtil: function (e) {var imageSize = {};var originalWidth = e.detail.width; // 图片原始宽var originalHeight = e.detail.height; // 图片原始高var originalScale = originalHeight/originalWidth; //图片高宽比//获取屏幕宽高wx.getSystemInfo({success: function (res) {var windowWidth = res.windowWidth;var windowHeight = res.windowHeight;var windowscale = windowHeight/windowWidth;//屏幕高宽比if (originalScale < windowscale) { // 图片高宽比小于屏幕高宽比//图片缩放后的宽为屏幕宽imageSize.imageWidth = windowWidth;imageSize.imageHeight = (windowWidth * originalHeight) / originalWidth;} else { // 图片高宽比大于屏幕高宽比//图片缩放后的高为屏幕高imageSize.imageHeight = windowHeight;imageSize.imageWidth = (windowHeight * originalWidth) / originalHeight;}}})return imageSize;}
})

微信小程序图片等比例缩-放（图片自适应屏幕）相关推荐

微信小程序的wx.chooseImage如何把图片传给后端
微信小程序的wx.chooseImage如何把图片传给后端首选wx.chooseImage的用法先见官方文档 => wx.chooseImage 这个的返回值如下↓ 这里可以看到这个temp ...
html img 手势缩放,微信小程序中利用image组件实现图片手势缩放
微信小程序中利用image组件实现图片手势缩放,前端大神严灏的牛文,讲解了微信小程序中image组件的三种是缩放模式,三种之中,只有 aspectFit 模式可以等比例缩放图片,并显示完整的图片. 原 ...
解决微信小程序安卓手机访问不到图片，无法显示图片
关于微信小程序不显示图片通病可能有以下几个可能性: 非本地图片:确定图片资源存在,copy 图片url再浏览器打开,确定图片资源存在且能正常访问本地图片:确定相对路径或者绝对路径正确微信小程序图 ...
微信小程序轮播图高度与图片高度不匹配问题
微信小程序轮播图高度与图片高度不匹配问题在微信小程序项目中,为了美观给page设置了padding值,然后让轮播图里面的图片宽度为100%,高度widthFix自适应,出现了如下问题:指示器位置不对 ...
微信小程序选择手机相册里的图片并上传到页面
微信小程序获取手机相册里的图片并传到页面上 index.wxml代码 // 相册中的照片 <button bindtap='handleChooseAlbum'>选中图片</butt ...
微信小程序利用scroll-view和swiper实现图片滚动切换
微信小程序利用scroll-view和swiper实现图片滚动切换 <view class="starbox"><view class="starare ...
微信小程序中使用wxss加载图片并实现动画
微信小程序中使用wxss加载图片并实现动画记录微信小程序中使用wxss加载图片并实现动画的方式,最终实现loading效果. 代码 .weui-loading { margin: 0 5px; wi ...
7.微信小程序做按比例截取图片
项目需求是需要做一个上传图片按1:1,16:9 ,3:4一个图片截取,网上查了好久,找到一个cropper截取组件 ,现在把接入以及修改步骤记录一下截取组件原地址找不到了,贴一下代码吧(谢谢大佬分享 ...
微信小程序之页面样式以及背景图片显示问题
##一.背景下面这些都是在开发的过程中,记录下来的笔记. ##二.样式及背景图片显示问题 1.修改单个页面的背景色: 在页面的wxss里面加上这句代码: page{background-color: ...
《微信小程序案例6》点击图片上传，从本地相册选择或打开摄像头拍摄上传照片
点击一下相机图片实现上传本都相册图片或者打开摄像头拍照上传使用微信小程序API里面的wx.chooseImage 实现点击并上传图片后把上传的图片放入上面的虚线框里面. 方法: 在wx.choose ...

微信小程序图片等比例缩-放（图片自适应屏幕）

1、wxml

2、wx.js

微信小程序图片等比例缩-放（图片自适应屏幕）相关推荐

最新文章

热门文章

微信小程序 图片等比例缩-放（图片自适应屏幕）

1、wxml

2、wx.js

微信小程序 图片等比例缩-放（图片自适应屏幕）相关推荐

最新文章

热门文章

微信小程序图片等比例缩-放（图片自适应屏幕）

微信小程序图片等比例缩-放（图片自适应屏幕）相关推荐