大家都知道微信小程序图片自适应，是一个比较常见的需求，平时我们在WEBView中，只需要设置max-width:100%.在微信里面虽然widthFix也能实现，但有一个缺陷就是图片的宽度值要大于或者等于设定的值，否则就会发生拉伸变形，本文通过另外一种来适应。

首先我们来看看图片组件给的一些说明：

注：image组件默认宽度300px、高度225px

mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。

如果说要有一种比较合适的方案，大概是widthFix，然而上面这些模式中，所要求的前提是需要给图片标签设定一个宽度值或者一个高度值。但有时候我们根本不想限定图片的宽高，我们需要的是图片自身能够根据自身的大小来适配。

而widthFix模式就要求你必须先设定一个宽度值，如果出来的图片比给定的width小呢？此时图片则会发生拉伸的现象。 （常见应用在文章中，因为文章中的插图有可能比默认的宽小，比如常见的表情）。

其实上面的标签中，图片为我们预留了一个函数bindLoad。下面看看我是怎么支持自适应的。

有一个前提，就是多图的时候，你需要知道这个图片是处于所有中的位置index，我们通过这个位置来保存图片的宽度和高度。

<image src="http://ww4.sinaimg.cn/bmiddle/006q8Q6bjw1fbwucs1cctj30t80t8myh.jpg" bindLoad="imageLoad" style="width:{{imageSize[0].width}}rpx; height:{{imageSize[0].height}}rpx" data-index="0" mode="scaleToFill"/>
<image src="http://ww4.sinaimg.cn/bmiddle/006q8Q6bjw1fbwucs1cctj30t80t8myh.jpg" bindLoad="imageLoad" style="width:{{imageSize[1].width}}rpx; height:{{imageSize[1].height}}rpx" data-index="1" mode="scaleToFill"/>

var px2rpx = 2, windowWidth=375;
page({
 data:{
 imageSize:{}
 },
 onLoad:function(options){
 wx.getSystemInfo({
 success: function(res) {
 windowWidth = res.windowWidth;
 px2rpx = 750 / windowWidth;
 }
 })
 },
 imageLoad:function(e){
 //单位rpx
 var originWidth = e.detail.width*px2rpx, 
 originHeight = e.detail.height*px2rpx,
 ratio = originWidth/originHeight;
 var viewWidth = 710,viewHeight//设定一个初始宽度
 //当它的宽度大于初始宽度时，实际效果跟mode=widthFix一致
 if(originWidth>= viewWidth){
 //宽度等于viewWidth,只需要求出高度就能实现自适应
 viewHeight = viewWidth/ratio;
 }else{
 //如果宽度小于初始值，这时就不要缩放了
 viewWidth = originWidth;
 viewHeight = originHeight;
 }
 var imageSize = this.data.imageSize;
 imageSize[e.target.dataset.index] = {
 width:viewWidth,
 height:viewHeight
 }
 this.setData({
 imageSize:imageSize
 })
 }
})

如果我们的图片中不仅限定了宽度，还限定了高度值，比如我们限定max-height之类的。那我们的imageLoad函数则要调整为根据他们的宽高比来输出。

imageLoad:function(e){
 var originWidth = e.detail.width * px2rpx,
 originHeight=e.detail.height *px2rpx,
 ratio = originWidth/originHeight ;
 var viewWidth = 220,viewHeight = 165, viewRatio = viewWidth/viewHeight;
 if(ratio>=viewRatio){
 if(originWidth>=viewWidth){
 viewHeight = viewWidth/ratio;
 }else{
 viewWidth = originWidth;
 viewHeight = originHeight
 }
 }else{
 if(originWidth>=viewWidth){
 viewWidth = viewRatio*originHeight
 }else{
 viewWidth = viewRatio*originWidth;
 viewHeight = viewRatio*originHeight;
 }
 }
 var image = this.data.imageSize;
 image[e.target.dataset.index]={
 width:viewWidth,
 height:viewHeight
 }
 this.setData({
 imageSize:image
})
},

附录：小图预览，进入全屏模式。

用预览图片的API，wx.previewImage(OBJECT)以下是对应的代码，样式部分，自行布局。

html代码：

<view class="wrap">
 <image wx:for="{{pictures}}" wx:key="unique" src="{{item}}" data-index="{{index}}" bindtap="previewImage"></image>
</view>

JS

Page({
 data: {
 pictures: [
 'https://p0.meituan.net/movie/ea4ac75173a8273f3956e514a4c78018253143.jpeg',
 'https://p0.meituan.net/movie/5d4fa35c6d1215b5689257307c461dd2541448.jpeg',
 'https://p0.meituan.net/movie/0c49f98a93881b65b58c349eed219dba290900.jpg',
 'https://p1.meituan.net/movie/45f98822bd15082ae3932b6108b17a01265779.jpg',
 'https://p1.meituan.net/movie/722de9a7b0c1f9c262162d87eccaec7c451290.jpg',
 'https://p0.meituan.net/movie/cb9be5bbedb78ce2ef8e83c93f83caca474393.jpg',
 'https://p1.meituan.net/movie/a852b992cdec15319c717ba9fa9b7a35406466.jpg',
 'https://p1.meituan.net/movie/dc1f94811793e9c653170cba7b05bf3e484939.jpg'
 ]
 },
 previewImage: function(e){
 var that = this,
 index = e.currentTarget.dataset.index,
 pictures = this.data.pictures;
 wx.previewImage({
 current: pictures[index],
 urls: pictures
 })
 }
})

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

# 小程序图片自适应  # 小程序里图片自适应  # 微信小程序自适应  # 微信小程序实现富文本图片宽度自适应的方法  # 微信小程序之swiper轮播图中的图片自适应高度的方法  # 微信小程序实现image组件图片自适应宽度比例显示的方法  # 微信小程序图片自适应支持多图实例详解  # 微信小程序 图片宽度自适应的实现  # 微信小程序 图片等比例缩放（图片自适应屏幕）  # 微信小程序图片自适应实现解析  # 自适应  # 只需要  # 求出  # 有一个  # 的是  # 是一个  # 也就是说  # 我是  # 他们的  # 就会  # 大家都  # 就能  # 将会  # 有可能  # 也能  # 有一种  # 来看看  # 说要  # 只在  # 这篇文章 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 开心动漫网站制作软件下载,十分开心动画为何停播？  Laravel如何使用Socialite实现第三方登录？（微信/GitHub示例）  Laravel如何使用软删除（Soft Deletes）功能_Eloquent软删除与数据恢复方法  Laravel如何为API生成Swagger或OpenAPI文档  Python文本处理实践_日志清洗解析【指导】  潮流网站制作头像软件下载,适合母子的网名有哪些？  如何在腾讯云服务器上快速搭建个人网站？  进行网站优化必须要坚持的四大原则  Win10如何卸载预装Edge扩展_Win10卸载Edge扩展教程【方法】  Laravel怎么使用Blade模板引擎_Laravel模板继承与Component组件复用【手册】  佐糖AI抠图怎样调整抠图精度_佐糖AI精度调整与放大细化操作【攻略】  Laravel路由怎么定义_Laravel核心路由系统完全入门指南  如何制作公司的网站链接,公司想做一个网站，一般需要花多少钱？  详解阿里云nginx服务器多站点的配置  微信推文制作网站有哪些,怎么做微信推文，急？  浅谈Javascript中的Label语句  如何在云主机上快速搭建多站点网站？  如何快速生成ASP一键建站模板并优化安全性？  网站制作报价单模板图片,小松挖机官方网站报价？  今日头条微视频如何找选题 今日头条微视频找选题技巧【指南】  Java Adapter 适配器模式（类适配器，对象适配器）优缺点对比  Laravel软删除怎么实现_Laravel Eloquent SoftDeletes功能使用教程  弹幕视频网站制作教程下载,弹幕视频网站是什么意思？  Android GridView 滑动条设置一直显示状态(推荐)  如何在VPS电脑上快速搭建网站？  教学论文网站制作软件有哪些,写论文用什么软件 ？  如何在万网主机上快速搭建网站？  如何快速搭建高效服务器建站系统？  Python并发异常传播_错误处理解析【教程】  Laravel如何获取当前用户信息_Laravel Auth门面获取用户ID  如何快速生成橙子建站落地页链接？  香港服务器网站生成指南：免费资源整合与高速稳定配置方案  Laravel如何部署到服务器_线上部署Laravel项目的完整流程与步骤  Win11怎么关闭透明效果_Windows11辅助功能视觉效果设置  Laravel怎么自定义错误页面_Laravel修改404和500页面模板  利用 Google AI 进行 YouTube 视频 SEO 描述优化  PythonWeb开发入门教程_Flask快速构建Web应用  ChatGPT怎么生成Excel公式_ChatGPT公式生成方法【指南】  如何用VPS主机快速搭建个人网站？  如何用花生壳三步快速搭建专属网站？  Laravel如何发送系统通知？（Notification渠道示例）  Laravel如何实现RSS订阅源功能_Laravel动态生成网站XML格式订阅内容【教程】  Laravel怎么实现微信登录_Laravel Socialite第三方登录集成  家族网站制作贴纸教程视频,用豆子做粘帖画怎么制作？  Laravel如何理解并使用服务容器（Service Container）_Laravel依赖注入与容器绑定说明  Laravel怎么实现验证码功能_Laravel集成验证码库防止机器人注册  mc皮肤壁纸制作器,苹果平板怎么设置自己想要的壁纸我的世界？  Laravel如何处理异常和错误？（Handler示例）  手机网站制作平台,手机靓号代理商怎么制作属于自己的手机靓号网站？  Laravel Seeder填充数据教程_Laravel模型工厂Factory使用