欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

微信小程序 - image 宽高自适应(图片无法自适应撑开标签)

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

  • image 标签有 srcmode 等属性基本够用

  • 但是今天在用的时候发现设置 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 宽高自适应(图片无法自适应撑开标签)

    • 原始效果:

      <image src="./temp.png"></image>
      

    微信小程序 - image 宽高自适应(图片无法自适应撑开标签)

    • 上面动态设置宽高之后效果,同样还可以配合 mode 进行使用

    下面这个图宽高都是有最大范围,当超过最大范围值需要显示图片中间部分,默认是填充撑满的,就需要 imagemode 配合:

    微信小程序 - image 宽高自适应(图片无法自适应撑开标签)

    <image style="{{imgStyle}}" mode="aspectFill" bindload="imageLoadSuccess" src="./temp.png"></image>
    

    微信小程序 - image 宽高自适应(图片无法自适应撑开标签)

本文地址:https://blog.csdn.net/zz00008888/article/details/109204342