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

最新推荐文章于 2025-03-24 14:04:31 发布
最新推荐文章于 2025-03-24 14:04:31 发布
阅读量2.2w 收藏 8
点赞数 1
分类专栏： 微信小程序 文章标签： 微信 api 图片 布局 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_19891827/article/details/76080260
版权
本文介绍了微信小程序中如何实现图片在image组件内等比缩放并垂直、水平居中。通过分析官方API和实际案例，讨论了在不同设备上获取图片真实宽高的方法，并提出了一种基于原始宽高比例的解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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



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

<view style="width:750rpx;height:750rpx;backgro
最低0.47元/天 解锁文章
微信小程序-页面开发
陆卿之的博客
01-02 3744
页面开发
微信小程序图片文字水平垂直居中对齐
qq_39702981的博客
12-14 1万+
微信小程序图片文字水平垂直居中对齐 要实现水平垂直居中 可使用如下方案 给父元素设置 .td { display: flex; align-items: center; justify-content: center; } 文字的水平居中 text-align: center; 居中对齐方式有很多种例如 text-align:center; align-items:......
微信小程序开发 图片等比例缩放
就写一行代码
04-25 3257
1.pic.wxml&lt;image style="width: {{imagewidth}}px; height: {{imageheight}}px;" src="{{img_url}}" bindload="imageLoad"&gt;&lt;/image&gt; 2.pic.js// pages/userCenter/pages/pic/pic.js var util = requir...
微信小程序 图片等比例缩放（图片自适应屏幕）
a458651114的博客
02-28 1万+
index.wxml &lt;!--图片宽高大于屏幕宽高--&gt; &lt;image style="width: {{imagewidth}}px; height: {{imageheight}}px;" src="{{imageSrc}}" bindload="imageLoad"&gt;&lt;/image&gt; index.js &lt;!--图片宽高大于屏幕宽高--&am
uni-app&微信小程序图片组件的等比例缩放和自适应裁切显示
最新发布
u013203950的博客
03-24 538
缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满。比如用户头像，图片的宽高是固定的，图片如果比较长，可以使用。裁剪模式，不缩放图片，只显示图片的左上边区域。裁剪模式，不缩放图片，只显示图片的右上边区域。裁剪模式，不缩放图片，只显示图片的左下边区域。裁剪模式，不缩放图片，只显示图片的右下边区域。裁剪模式，不缩放图片，只显示图片的顶部区域。
微信小程序图片等比缩放显示正中间
简单技术
04-14 7095
这是小程序 image标签的mode ,对图片的缩放做的处理 缩放 scaleToFill 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 缩放 aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 缩放 aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的...
【微信小程序】image组件的4种缩放模式与9种裁剪模式
颜颜yan_的博客
11-14 2299
哈喽大家好，本次是微信小程序专栏的第九期。在项目中，我们经常要面对图片的尺寸结合设计图的尺寸不同的情况。在这种情况下，我们必须要有所舍弃，或放弃等比例，或裁剪掉图片的一部分。本期的主要内容是image组件的4种缩放模式与9种裁剪模式。注意：每期内容是连载呢，建议大家可以看看往期内容，更好理解噢~每种模式的字面意思都很好理解。要更改图片的裁剪或缩放模式，只需要给image组件加上一个mode属性值。以上就是今天的学习内容啦~如果有兴趣的话可以订阅专栏，持续更新呢~咱们下期再见~
微信小程序实现双指缩放图片功能
King博客
04-27 6751
前言 本文分析怎么在微信小程序实现双指缩放图片的功能。 实现过程 1. 文件index.wxml和index.wxss代码如下，这一块比较简单，可自行查看，不做过多分析； <!--index.wxml--> <view class='wrapper'> <view class="container"> <view class="tit...
微信小程序中使用wxss加载图片并实现动画效果
10-18
属性值包括：scaleToFill（保持纵横比缩放图片，使图片的宽高完全拉伸至填满image组件）、aspectFit（保持纵横比缩放图片，使图片的长边能完全显示出来）、aspectFill（保持纵横比缩放图片，只保证图片的短边能完全...
微信小程序让image图片居中显示和铺满全屏幕的方法
美奇软件开发工作室
10-24 1万+
wxml <view class='imagesize'> <image src="/images/1.png" mode="widthFix"> </image> </view> wxss 1、图片水平居中（屏幕顶部）： .imagesize{ display:flex; //flex布...
微信小程序-view居中问题
yueIwen的博客
01-09 2564
最近开发微信小程序，发现小程序大部分语法是ES6的标准,比如...操作符，替代了apply 和call; 而且页面展示wxss,虽然微信最近规范了一些，但是css3的一些用法可用的，css3相信html5前端开发一定不陌生，相信用着用着就会记得住那么多的标签了，当然现在已经有了布局软件，大神们也不用在意那些css3样式了，但是我们更喜欢去手敲代码，鼠标拖来拖去，不爽。 今天说一个view居中...
微信小程序图片的垂直和水平居中，line-height无效，使用flew布局
qq_57057576的博客
07-20 2828
line-height可以时内部文字垂直居中显示，但是对于图片并未发挥效果。微信小程序中，图片的完全居中显示，line-height并不能发挥效果，不过，水平居中显示，可以使用text-aligncenter。解决方法使用flew布局。...
微信小程序 视图容器总结
juse__we的博客
11-05 1065
1view（正常区域） 2scroll-view（区域内，可以做局部滚动） 3swiper（区域内滚动，但基本是整个区域滚动，做的事轮播图之类） 4cover-view（覆盖在原生组件之上的文本视图，可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher，只支持嵌套cover-view、cover-image，可在cover-vie...
微信小程序实现对图片的缩放与裁剪
Jarry007的博客
03-17 1万+
思路 实现图片的缩放 wx.chooseImage上传图片 wx.getImageInfo获取图片宽高等信息 bindtouchstart,bindtouchmove记录双指事件 通过双指移动的距离与初始距离的关系判断缩放 规定阈值，最大与最小缩放 实现对图片的裁剪 canvas.drawImage对图片进行绘制 wx.totenm实现对绘制图片的裁剪 取消，清空参数 开始操...
微信小程序开发-让图片居中
隔壁老瓦的专栏
10-23 6635
客户说要在首页加个logo然后居中，用最后给的完整代码，按照我的步骤一定能调试出来，不行再联系我。先给用到的代码以及效果图：先给wxml程序：color:white'>XXXX实名采集系统重点样式：其中display:flex;是什么意思呢如何使用，找了一篇文章Flexbox 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。。
微信小程序元素水平居中或垂直居中
七夜的博客
10-30 1784
最近在做一个微信小程序的项目，其中涉及到css样式实现将标签内的图片和文本元素垂直排列，并水平居中。在尝试实现的过程中，将元素在标签内的所有排列情况都顺带实现了。上代码：index.wxmlindex.wxss。
微信小程序 居中、居右、居底和横向、纵向布局，文字在图片中间，网格布局
油焖茄子 的博客
07-28 1万+
或者红色框加上：flex:1。//注意：这里的 height 写 100%会使得垂直居中可能会不生效。子类：display:inline/inline-block;需要知道控件的宽高，-100rpx为自身宽高（200）的一半。父类控件：position: relative;父类控件：position:relative;父类：text-align:center;水平居中B、相对父类控件–子控件绝对定位。子类控件：margin:0 auto;父类控件：display:flex;水平居中A：相对父类控件。
微信小程序居中、居右、居底和横向、纵向布局，文字在图片中间，网格布局
热门推荐
wy313622821的博客
04-21 6万+
布局、居中、解决兼容问题。
微信小程序实现图片无极缩放与移动功能教程
在微信小程序中实现图片的无极缩放与移动功能是一个相对高级的开发任务，因为微信小程序自带的组件或API并没有直接支持图片无极缩放的接口。因此，开发者需要通过编程技巧来实现这一功能。下面将详细介绍实现这一...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值