图片宽高自适应

<image src="../static/img14.png" :style="{ width: autoW + 'px', height: autoH + 'px' }" @load='autoImage' mode=""></image>
data() {
    return {
      autoW: 0,
      autoH: 0
    };
  },
// 控制图大小
    autoImage(e) {
      // 获取图片的狂傲
      var imgW = e.detail.width;
      var imgH = e.detail.height;
      // 计算图片比例
      var imgScale = imgW / imgH;
      // 声明自适应宽高变量
      var autoW = '';
      var autoH = '';
      // 获取屏幕宽度,并将图片设置为屏幕等宽
      wx.getSystemInfo({
        success: res => {
          autoW = res.windowWidth;
          autoH = autoW / imgScale;
          this.autoW = autoW
          this.autoH = autoH
        }
      });
    }
// // 控制图大小---针对数组
    // autoImage(e) {
    //  // 获取图片的狂傲
    //  let imgW = e.detail.width;
    //  let imgH = e.detail.height;
    //  let index = e.target.dataset.index;
    //  // let index =
    //  // 计算图片比例
    //  let imgScale = imgW / imgH;
    //  // 声明自适应宽高变量
    //  let autoW = 40;
    //  let autoH = '';
    //  autoH = autoW / imgScale;
    //  let newsList = this.newsList;
    //  newsList[index]['imgSize'] = `width:${autoW}px;height:${autoH}px`;
    //  this.newsList = [];
    //  this.newsList = newsList;
    //  // 获取屏幕宽度,并将图片设置为屏幕等宽
    //  // wx.getSystemInfo({
    //  //  success: res => {
    //  //      autoW = res.windowWidth;
    //  //      autoH = autoW / imgScale;
    //  //      this.setData({
    //  //          autoW: autoW,
    //  //          autoH: autoH
    //  //      });
    //  //  }
    //  // });
    // }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。