微信小程序 - image 宽高自适应(图片无法自适应撑开标签)
程序员文章站
2022-06-28 19:13:52
微信小程序中的 image 标签跟 html 中的 img 标签还是有些差别的。image 标签有 src、mode 等属性基本够用但是今天在用的时候发现设置 src 之后,image 在小程序中是默认有宽高的,也就是固定的,去掉宽高之后,也不会像 html 中的 img 标签一样图片内容会撑开标签,这里就需要自己来根据图片的大小进行手动自适应图片宽高了。使用 bindload 绑定函数动态自适应,我们可以获取到原图的宽度和高度,计算他们的宽高比率,然后设置一个宽度大小(rpx),最后.....
-
微信小程序中的 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>
本文地址:https://blog.csdn.net/zz00008888/article/details/109204342
上一篇: uniapp H5端中使用高德API