小程序设置保持图片原有比例

最新推荐文章于 2023-06-20 16:46:47 发布

原创最新推荐文章于 2023-06-20 16:46:47 发布 · 6.1k 阅读

4 ·

CC 4.0 BY-SA版权

小程序专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一种在HTML页面中动态调整图片尺寸的方法，利用JS监听图片加载事件，获取图片的真实宽度和高度，然后根据实际需求调整图片显示尺寸，确保图片在不同设备上都能完美展示。

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

html页面

 <view wx:for="{{dayItem.images}}">
    <image src='{{item}}' data-index="{{ index }}"  bindload="imageLoad" style="width:{{ images[index].width }}rpx; height:{{ images[index].height }}rpx;"></image>
  </view>

  //获取图片真实尺寸
Page({
  data: {
    images:{}
  },
  imageLoad: function(e) {
     var $width=e.detail.width,    //获取图片真实宽度
         $height=e.detail.height,
         ratio=$width/$height;    //图片的真实宽高比例
     //var viewWidth=718,           //设置图片显示宽度，左右留有16rpx边距
       //  viewHeight=718/ratio;    //计算的高度值
      var image=this.data.images; 
      //将图片的datadata-index作为image对象的key,然后存储图片的宽高值
      image[e.target.dataset.index]={
         width: $width,
         height:$height
      }
      this.setData({
           images:image
      })
  }
})