收藏
回答

image组件如何aspectFit如何去掉留白?


因为图片太长影响了浏览,所以采用aspectFit缩放模式,但是图片却无法居左展示,有大佬有解决方案吗?

回答关注问题邀请回答
收藏

1 个回答

  • 栖喜
    栖喜
    2023-06-14

    可以获取图片的实际宽高,高度要是超出最大,就显示为最大高度,宽度不设置自适应

    示例

    https://www.jb51.net/article/106605.htm

    <image style="height: {{item.imageHeight>height?height+'px':item.imageHeight+'px'}};width: {{item.imageHeight>height?'':item.imageHeight==height?'100%':'100%'}}" mode="{{(item.imageHeight>375 || item.imageHeight==375)?'aspectFit':''}}"  src="{{item.image}}" bindload="imageLoaddata-item="{{item}}" data-index="{{index}}" data-indexs="{{indexs}}" />

    height:wx.getSystemInfoSync().windowWidth*1,
    imageLoad(e) {
        const index = e.currentTarget.dataset['index'];
        const indexs = e.currentTarget.dataset['indexs'];
        //获取图片的原始宽度和高度 
        let originalWidth = e.detail.width; 
        let originalHeight = e.detail.height; 
        let imageSize = util.imageZoomHeightUtil(originalWidth,originalHeight); 
        let imageHeight = `cookbooklist[${indexs}].cookbooklist[0][${index}].imageHeight`;
        let height=(imageSize && imageSize.imageHeight)?imageSize.imageHeight.toFixed(0):'';
        this.setData({
          [imageHeight]:height,
        }) 
      },
    
    util.imageZoomHeightUtil
    function imageZoomHeightUtil(originalWidth,originalHeight,imageWidth){ 
      let imageSize = {}; 
      if(imageWidth){ 
        imageSize.imageWidth = imageWidth; 
        imageSize.imageHeight = (imageWidth * originalHeight) / originalWidth; 
      }else{//如果没有传imageWidth,使用屏幕的宽 
        wx.getSystemInfo({  
          successfunction (res{  
            imageWidth = res.windowWidth;  
            imageSize.imageWidth = imageWidth; 
            imageSize.imageHeight = (imageWidth * originalHeight) / originalWidth; 
          }  
        }); 
      } 
      return imageSize; 
    } 
    



    2023-06-14
    有用
    回复
登录 后发表内容
问题标签