微信小程序图片自适应（微信小程序图片自适应宽高比例显示解决方法）

IT服务网

作者

华为云服务器特价优惠火热进行中！

2核2G2兆仅需 38 元；4核4G3兆仅需 79 元。购买时间越长越优惠！更多配置及优惠价格请咨询客服。

合作流程：
1、点击链接注册/关联华为云账号：点击跳转
2、添加客服微信号：cloud7591，确定产品方案、价格方案、服务支持方案等；
3、客服协助购买，并拉微信技术服务群，享受一对一免费技术支持服务；
★技术专家在金蝶、华为、腾讯原厂有多年工作经验，并已从事云计算服务8年，可对域名、备案、网站搭建、系统部署、AI人工智能、云资源规划等上云常见问题提供更专业靠谱的服务，对相应产品提供更优惠的报价和方案，欢迎咨询。

今天给各位分享微信小程序图片自适应的知识，其中也会对微信小程序图片自适应宽高比例显示解决方法进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

微信号：cloud7591
如需了解更多，欢迎添加客服微信咨询。
复制微信号

实现小程序image图片宽度100%高度自适应

因为微信小程序的图片image有默认的宽高：width: 320px和height: 240px，所以只设置宽度100%是无效的，因为图片高度默认240px

只需要添加属性 mode="者慎widthFix"

image class="img" src="../images/1.png" mode="widthFix"

设置宽首耐敬度100%，

.img{width: 100%;}

这样就可以实亩悉现图片宽度100%高度自适应，图片不会拉伸

微信小程序图片自适应（微信小程序图片自适应宽高比例显示解决方法）

微信小程序 rich-text 富文本图片自适应

p :class="item.isMore == true ? 'richText' : 'minH'" v-if="isShow"

v-html="contentConv(item.storyContent)"

直接在css中加max-width:100%;height:auto; 。没有生效

方式一：在style中追加 max-width:100%;height:auto; ，此方法优点灵活，对于content中所有图片都起作用

// 文章html正则追加max-width

contentConv(content) {

return content.replace(/(img).*?(\/|早桥散\/img)/g, function(mats) {

if (mats.indexOf('style') 0) {

return mats.replace(/\s*img/, 'img style="max-width:100%;height:auto;"');

} else {

return mats.replace(/style=("|')/, 'style=$1max-width:100%;height:auto;')

}

});

方式二：此方法会破坏图片设置的样式，消基再设置style="max-width:100%;height:auto;"

contentConv(content) {

return content.replace(/陆氏img[^]*/gi, function (match, capture) {

return match.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/ig, 'style="max-width:100%;height:auto;"') // 替换style

});

}

华为微信小程序缩放

1、在小程序的app.json里配置window.viewport，可以根据屏幕宽度等自适应缩放。毁顷旦

2、在小程序的index.html的head标签中添加乎胡，纤扰可以根据屏幕宽度等自适应缩放。

微信小程序横屏状态下的自适应实践（尺寸单位vmin）

在目标页面 json 文件里设置 "pageOrientation": "landscape" 即可实现全屏，这个参数默认是 "portrait" （竖屏），设置 "auto" 表示跟随手机系统自动转换。

需要注意的是，设为横屏后， rpx 单位不再生效，有人建议使用 px ，但是这样不能实现自适应布局，所以我们需要引入一个新的单位： vmin 。

vmin ：视口宽度 vw 和高度 vh 两者之间的最小值。

其实，有 vmin 自山镇滚然就会有 vmax ， vmax 意为视口宽度 vw 和高度 vh 两者之间的最大值。

vw 我们都理解，是当前设备宽度的1%，即1vw就是设备宽度的1%，50vw就是设备宽度的50%（ vh 同理）

vmin 怎么理解呢？拆一下，看成 v + min ，前面的 v 还逗余是 vw 中的 v ， min 则是 w 和 h 中的最小值，这样一来， vmin就能理解为当前设备最短边的1% （ vmax 则是最长边的1%），是不是立马就懂啦？50vmin就是最短边的一半，100vmin就是最短边旅改的全部。

什么时候会用到这两个单位呢？

案例1：一个总能展示在屏幕的正方形（如上图左边黄色区域）可以这样定义：

案例2：一个以屏幕最长边为边长的正方形（如上图右边黄色区域）可以这样定义：

所以，我们在小程序中使用 vmin 作为长度单位就能保证所有元素都能正常展示，也可以适应各种尺寸的屏幕了。

但是这样一来，写CSS的时候不就很麻烦？我们想实现一个竖屏状态下是200rpx * 50rpx的按钮，在横屏状态下使用 vmin 做单位的话，宽高各是多少呢？这涉及 rpx 和 vmin 的单位换算，所以我们需要定义一个转换函数帮助我们处理这些转换逻辑。

这篇文章介绍了如何在微信小程序中使用SCSS，这里我们使用SCSS定义该函数，：

于是，横屏页面下，我们可以这样定义一个按钮使之做到自适应：

最终渲染出来的结果是：

你学废了吗？

微信搜索「熊猫活动助理」进入体验。

小程序中的抽奖界面使用了横屏模式，可以进入小程序体验一下，具体操作可参考《如何制作一个抽奖点名工具》。