-
微信小程序中的 image 标签跟
html
中的img
标签还是有些差别的。 -
image 标签有
src
、mode
等属性基本够用 -
但是今天在用的时候发现设置
src
之后,image 在小程序中是默认有宽高的,也就是固定的,去掉宽高之后,也不会像html
中的img
标签一样图片内容会撑开标签,这里就需要自己来根据图片的大小进行手动自适应图片宽高了。 -
使用
bindload
绑定函数动态自适应,我们可以获取到原图的宽度和高度,计算他们的宽高比率,然后设置一个宽度大小(rpx),最后通过style
动态设置 image 的宽高。 -
代码如下:
-
.wxml
<image src="./temp.png" style="{{imgStyle}}" bindload="imageLoadSuccess"></image>
-
.js
微信小程序 - 设备信息与版本更新 这个文章中有动态
pixelRatio
的计算获取。// 设备像素比可以放到 app 中作为全局属性使用 const app = getApp() Page({ data: { // 默认图片没有宽高(你可以默认有宽高) imgStyle: 'width: 0rpx; height: 0rpx;' // 设备像素比,如果不知道获取像素比的可以看看上面那篇文章 pixelRatio: 2 }, // 图片加载完成回调 imageLoadSuccess (e) { // 获取图片信息 const imgDetail = e.detail // 手动设置图片样式宽高 this.setData({ // 图片原始宽高度 * pixelRatio imgStyle: `width: ${imgDetail.width * this.data.pixelRatio}rpx; height: ${imgDetail.height * this.data.pixelRatio}rpx;` }) } })
-
-
效果比较
- 上面动态设置宽高之后效果:
-
原始效果:
<image src="./temp.png"></image>
- 上面动态设置宽高之后效果,同样还可以配合
mode
进行使用
下面这个图宽高都是有最大范围,当超过最大范围值需要显示图片中间部分,默认是填充撑满的,就需要
image
的mode
配合:<image style="{{imgStyle}}" mode="aspectFill" bindload="imageLoadSuccess" src="./temp.png"></image>
微信小程序 - image 宽高自适应(图片无法自适应撑开标签)
最新推荐文章于 2024-03-16 21:03:27 发布
本文介绍了微信小程序中Image标签与HTML img标签的不同,主要问题在于小程序的Image标签默认有固定宽高。为实现自适应,可以通过bindload事件动态获取图片尺寸,并结合设备像素比计算出适应的宽高,从而实现图片的动态自适应。示例代码展示了如何在WXML和JS中操作实现这一功能,并提供了不同mode模式下image的展示效果。
摘要由CSDN通过智能技术生成