【知识整理】微信小程序-图片在容器中等比缩放至垂直、水平居中，并计算缩放后真实宽高

最新推荐文章于 2024-04-18 16:17:52 发布
VIP文章 最新推荐文章于 2024-04-18 16:17:52 发布
阅读量2.2w 收藏 8
点赞数 1
分类专栏： 微信小程序 文章标签： 微信 api 图片 布局 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_19891827/article/details/76080260
版权

一.对于微信小程序页面中的图片，官方提供了image组件进行支持。根据官方文档，image组件用法如下：



例：图片水平、垂直居中布局代码如下：

<view style="width:750rpx;height:750rpx;backgro
最低0.47元/天 解锁文章
qq_19891827
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
【微信小程序-毕设期末大作业】图片展示小程序+Java后端源码
03-19
【微信小程序-毕设期末大作业】图片展示小程序+Java后端源码.zip 【微信小程序-毕设期末大作业】图片展示小程序+Java后端源码.zip 【微信小程序-毕设期末大作业】图片展示小程序+Java后端源码.zip 【微信小程序-毕设期末大作业】图片展示小程序+Java后端源码.zip 【微信小程序-毕设期末大作业】图片展示小程序+Java后端源码.zip 【微信小程序-毕设期末大作业】图片展示小程序+Java后端源码.zip 【微信小程序-毕设期末大作业】图片展示小程序+Java后端源码.zip 【微信小程序-毕设期末大作业】图片展示小程序+Java后端源码.zip 【微信小程序-毕设期末大作业】图片展示小程序+Java后端源码.zip 【微信小程序-毕设期末大作业】图片展示小程序+Java后端源码.zip 【微信小程序-毕设期末大作业】图片展示小程序+Java后端源码.zip 【微信小程序-毕设期末大作业】图片展示小程序+Java后端源码.zip 【微信小程序-毕设期末大作业】图片展示小程序+Java后端源码.zip 【微信小程序-毕设期末大作业】图片展示小程序+Java后端源码.
微信小程序-微信小程序中的图片自适应宽高的计算类
08-07
WxAutoImage 来源 微信小程序开发论坛 垂直微信小程序开发交流论坛 有话说 如果你已经看过一段时间的微信小程序后，你会发现，小程序中的图片虽然给了很多种mode，但是在你使用过程中，会出现很尴尬的问题。 比如： 图片很高，但是在显示的时候，只能看到小的缩略图，且如不指定宽高，则在默认渲染中，则宽高都为320，240. 在视觉设计上会有一定的麻烦。 在实际开发中，也有很多人问过我这个问题，今天说一下单图片的适配，多图片我目前还没有找到合适的处理方案，等有了再说。 通过image的bindload来计算自适应宽高 > 微信小程序中image暴漏的函数比较少，但是bindload十分有用。 官方说明： 当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:'图片高度px', width:'图片宽度px'} ⚠️： 这里的height:'图片高度px', width:'图片宽度px'都是原始宽高，这就给了我们可以计算的余地 思路 获取图片原始宽高 获取系统屏宽 以原始宽与系统屏宽对比大小，以大者为基准缩放 实现函数
解决使用wx.createSelectorQuery()获取不到元素
gurenchang的博客
03-07 376
解决使用wx.createSelectorQuery()获取不到元素
小程序图片两列显示
清欢Viki的博客
06-06 4865
效果图 问题描述 我的想法是将屏幕分为左右两个view，每个view循环一个list。整体flex布局，flex-direction: column就可以了。 代码 xml <view class='cateCommodity '> <view class='item-container'> <block wx:for="{{left...
微信小程序竖排slider
weixin_42913526的博客
03-26 2902
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
小程序开发之垂直列表
和代码打交道的日子的博客
04-12 1127
小程序一不小心站在了风口，身为android开发的我也不得不去了解了解小程序的开发，在学习过程中，发现布局是非常另小编着急的，于是就花费了两天的时间专门学习一下布局。略有成果，就拿出来分享一下：如下图好了废话不多说了直接撸代码。下面是页面组件 &lt;view class='list'&gt; &lt;block wx:for="{{movies}}"&gt; ...
WeChat微信小程序image组件aspectFill：保留中部 等比例变化 Widthfix：宽度为指定的  高度依据原图的宽高比进行变化
思维小刀
09-29 1812
aspectFill aspectFill 与 widthfix 都是保持宽高比不变 aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来。 也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 aspectFill同样保持图片的宽高比不会变形。但它让图片完全填满整个容器，类似于scaleToFill这种模式。 不同的是，scaleToFill会改变图片的宽高比，而aspectFill不会。 用我们提到的“容器”的观点来理解aspectFill。 既然as
小程序image中写入mode=“aspectFill“
m0_63476377的博客
01-19 6233
mode 的默认值是scaleToFill，功能是缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素，就不符合我们所需要的。 我们所需要的保持长宽比不变的是aspectFit和aspectFill。 aspectFit 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 aspectFill 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 参
微信小程序image组件中aspectFill和widthfix模式应用详解
热门推荐
weixin_33700350的博客
06-17 1万+
aspectFill 与 widthfix 都是保持宽高比不变 aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 aspectFill同样保持图片的宽高比不会变形。但它让图片完全填满整个容器，类似于scaleToFill这种模式。不同的是，scaleToFill会改变图片的宽高比，而aspect...
微信小程序8__一行2 列的布局，一行2列的图片布局
daozhongyang的专栏
07-05 6809
如果实现以下效果， 开发者需要怎么样做呢？ 在index.wxml中增加以下布局： <!-- 一行2列布局，左竖线右文字--> <view class="text"> <view class="line-y"></view> <text>精品推荐</text> </view> <!--一列2列 布局 精品推荐--> <view class="cps2"> <v
微信小程序图片的垂直和水平居中，line-height无效，使用flew布局
qq_57057576的博客
07-20 2570
line-height可以时内部文字垂直居中显示，但是对于图片并未发挥效果。微信小程序中，图片的完全居中显示，line-height并不能发挥效果，不过，水平居中显示，可以使用text-aligncenter。解决方法使用flew布局。...
微信小程序movable-view移动图片和双指缩放
03-29
movable-view是小程序自定义的组件.其描述为:”可移动的视图容器，在页面中可以拖拽滑动”. 官方文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/component/movable-view.html. 值得注意的是文档中有一段备注:...
微信小程序--旋转木马/缩放轮播图效果
03-29
微信小程序原生Swiper控件 Wxss Transform、Transition 轮播条滚动回调控制 微信小程序条件渲染、列表渲染 全部实现代码加起来也就三四十行，大部分还用来写wxml UI代码，所以功能实现起来非常简单。  首先将问题...
微信小程序-图片裁剪、旋转、预览、上传功能实现
11-29
1、点击图片上传按钮时，跳转页面到cropper进行图片选择剪切wx.navigateTo({ url: `/pages/...8、图片上传数据可以进行裁剪、选择、取消、裁剪后预览、上传以及限制大小，还可以缩放操作，需要的可以解除限制即可。
微信原生小程序封装用户登陆
最新发布
qq_59626859的博客
04-18 172
open-type是小程序中button的属性之一，合法霍倩倩getUserInfo,引导用户授权，可以从bindgetuserinfo回调中获取到用户信息。button可以指定plain属性，完全去掉样式，跟view类似。后端在用户登陆后会返回resfreshToken和token；
PHP婚恋小程序开发源码支持微信+公众号+APP
weixin_53410590的博客
04-11 648
婚恋相亲小程序的功能有会员功能，红娘管理，后台系统，支付系统，动态管理，通知管理，私人定制管理等等。联系TA记录：查看A联系B的记录，需要显示联系人方的ID与手机号，联系人发送的被联系人方的ID与手机号，点击按钮的时间，负责的星座红娘。可以按照红娘或时间段筛选。牵线记录：查看A牵线B的记录，需要显示牵线人的ID与手机号，被牵线人的ID与手机号，点击牵线的时间，负责的星座红娘，可以按照红娘或时间段筛选。我的联系方式记录：查看联系的红娘，联系人ID，手机号，发送的手机号与微信号。会员管理：会员管理所有功能。
微信小程序实现全局参数共享，且实现全局参数变化时的页面间通信
weixin_50784508的博客
04-13 504
首先，在app.js中定义全局参数，并提供一个方法来触发全局事件。// app.jsApp({},// 触发全局事件的方法key: key,// 使用 getApp() 获取到 App 实例，然后触发事件});
微信小程序之自定义组件及使用
m0_59704905的博客
04-16 468
创建一个名为custom-dialog的自定义组件，位于components下，创建自定义弹窗组件文件夹结构如下：写好自定义组件的结构文件.wxml、样式文件wxss、逻辑文件.js。该组件（本例子指CustomDialog 组件）的文件夹内含有一个有效的 .json 文件，且该文件中正确指定了组件的名称，例如：在需要使用此组件的页面的wxml文件中，本例子是在需要用到弹窗的页面index页面中引入并使用该组件：确保已在使用 <custom-dialog> 的页面中正确引入了该组件，例如在页面的 json
Java智慧校园系统源码springboot + vue智慧学校源码 微信小程序+电子班牌
zmm201453的博客
04-12 826
智慧校园的建设逐渐被师生、家长认可接受，智慧校园通过对在校师生、教务等所有人员的信息以及各种信息搜集与储存，进行数据优化与管理，为师生们提供更加智能化的校园服务。未来智慧校园将不再是一个陌生词，而会真正地应用在更多的校园管理中，让我们的校园生活变得更加美好
微信小程序实现图片的双指缩放
06-13
要实现微信小程序中图片的双指缩放，可以使用小程序自带的 `<canvas>` 组件。具体步骤如下： 1. 在 WXML 文件中添加 `<canvas>` 组件，并设置宽高和 ID： ```html <canvas canvas-id="myCanvas" style="width: 100...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值