uniapp图片自适应显示，不裁剪

最新推荐文章于 2024-07-10 15:30:34 发布

阿啦ala

最新推荐文章于 2024-07-10 15:30:34 发布

阅读量4.2k

点赞数 1

分类专栏： ES6 微信小程序 VUE 文章标签： uniapp 图片自适应宽高比

本文链接：https://blog.csdn.net/weixin_39152200/article/details/109840375

版权

VUE 同时被 3 个专栏收录

23 篇文章 0 订阅

订阅专栏

微信小程序

17 篇文章 3 订阅

订阅专栏

ES6

12 篇文章 0 订阅

订阅专栏

先看图：
在这里插入图片描述

这是长图和方图的显示效果，都可以完全显示出来
上代码：
html部分：

<view class="question-title" style="width: 100%">
	<image @load="imageLoad" :style="{'width': images.width + 'px', height: images.height + 'px'}" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3491947403,393487586&fm=26&gp=0.jpg" mode="aspectFit"></image>
</view>

js部分：

imageLoad: function(e) {
  var $width=e.detail.width,    //获取图片真实宽高
     $height=e.detail.height,
     ratio=$width/$height;    //图片的真实宽高比例
  var viewHeight=186,           //设置图片显示高度
     viewWidth=186 * ratio;    //计算的宽度值
     
  const query1= uni.createSelectorQuery().in(this);
  query1.select('.question-title').boundingClientRect(data => { // 获取图片区域的宽度
    console.log(data)
    if (viewWidth > data.width) { // 如果计算出来的图片宽度大于图片区域的宽度，则重新计算
      viewWidth=data.width          //固定图片宽度为区域宽度
      viewHeight=viewWidth / ratio; // 根据比例计算高度
    }
    var image= this.images; 
    image = {
       width:viewWidth,
       height:viewHeight
    }
    console.log(image)
    this.images = image
  }).exec();
}