微信小程序实现图片自适应

最新推荐文章于 2025-05-22 09:38:38 发布

原创最新推荐文章于 2025-05-22 09:38:38 发布 · 480 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种使用WXML实现的图片自适应加载方法，通过监听图片加载完成事件动态调整图片尺寸，确保图片能够在不同屏幕尺寸上保持良好的显示效果。该方法利用了图片的真实宽高比来计算展示宽度与高度，从而实现响应式布局。

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

<image src="/images/1.jpg" bindload="imageLoad"  
style="width:{{imgwidth}}rpx; height:{{imgheight }}rpx;"></image> 

  imageLoad: function (e) {
    var _this = this;
    var $width = e.detail.width,    //获取图片真实宽度  
      $height = e.detail.height,
      ratio = $width / $height;   //图片的真实宽高比例  
    var viewWidth = 800,           //设置图片显示宽度，  
      viewHeight = 800 / ratio;    //计算的高度值     
    this.setData({
      imgwidth: viewWidth,
      imgheight: viewHeight
    })
  }