很快微信开发者平台

 找回密码
 注册
查看: 2379|回复: 4

小程序关于图片自适应疑问

[复制链接]

11

主题

25

帖子

1192

积分

专家路上

积分
1192
 楼主| 发表于 2017-3-29 15:07:10 | 显示全部楼层 |阅读模式
20微币
本帖最后由 丶初夏微暖 于 2017-3-29 15:10 编辑

以下代码只实现了父级固定高度(px)下
大于父级高度的正方形自适应

util.js
  1. function imageUtil(e) {  
  2.   var imageSize = {};  
  3.   var originalWidth = e.detail.width;//图片原始宽  
  4.   var originalHeight = e.detail.height;//图片原始高  
  5.   console.log( '图片原始宽',originalWidth )
  6.   console.log( '图片原始高',originalHeight )
  7.   var originalScale = originalHeight/originalWidth;//图片高宽比  
  8.   console.log(originalScale)
  9.   //获取屏幕宽高  
  10.   wx.getSystemInfo({  
  11.     success: function (res) {  
  12.       var windowWidth = res.windowWidth;  
  13.       var windowHeight = res.windowHeight;  
  14.       var windowscale = windowHeight/windowWidth;//屏幕高宽比
  15.       if(originalScale < windowscale){//图片高宽比小于屏幕高宽比  
  16.         //图片缩放后的宽为屏幕宽  
  17.          imageSize.imageWidth = windowWidth;  
  18.          imageSize.imageHeight = (windowWidth * originalHeight) / originalWidth;  
  19.       }else{//图片高宽比大于屏幕高宽比  
  20.         //图片缩放后的高为屏幕高  
  21.          imageSize.imageHeight = windowHeight;  
  22.          imageSize.imageWidth = (windowHeight * originalWidth) / originalHeight;
  23.       }  
  24.       
  25.     }  
  26.   })  
  27.   console.log('缩放后的宽: ' + imageSize.imageWidth)  
  28.   console.log('缩放后的高: ' + imageSize.imageHeight)  
  29.   return imageSize;  
  30. }  
  31.   
  32. module.exports = {  
  33.   imageUtil: imageUtil  
  34. }  
复制代码


wxml
  1.         <image data-index="0" style="width: {{images[0].width}}px; height: {{images[0].height}}px;" bindload="imageLoad" src="/image/personal-core.png" class="slide-image" />
复制代码



js
  imageLoad: function (e) {
    var imageSize = imageUtil.imageUtil(e)
    var image = this.data.images;
    if(imageSize.imageHeight > 258){
      imageSize.imageWidth = 258
      imageSize.imageHeight = 258
    }

    image[e.target.dataset.index] = {
      width: imageSize.imageWidth,
      height: imageSize.imageHeight
    }
    this.setData({
      images: image
    })
  }


结果

QQ截图20170329150020.png




如果没有写红色代码的话

QQ截图20170329150219.png



如何把  258 改成 rpx呢
   if(imageSize.imageHeight > 258){
      imageSize.imageWidth = 258
      imageSize.imageHeight = 258
    }






最佳答案

查看完整内容

小程序自适应是不行的,但是可以通过后来程序来实现: 如我的PHP程序,在详细显示的页面中,将手机的宽高传给后台程序,后台程序来按手机宽高等比例缩小图片显示。 并将图片及宽高的json返回给小程序,用来控制图片的全屏等比例的显示。 四杰随手记已经实现 请参考
回复

使用道具 举报

4

主题

48

帖子

626

积分

专家路上

积分
626
发表于 2017-3-29 15:07:11 | 显示全部楼层
小程序自适应是不行的,但是可以通过后来程序来实现:
如我的PHP程序,在详细显示的页面中,将手机的宽高传给后台程序,后台程序来按手机宽高等比例缩小图片显示。
并将图片及宽高的json返回给小程序,用来控制图片的全屏等比例的显示。

四杰随手记已经实现
请参考
回复

使用道具 举报

0

主题

3

帖子

70

积分

新人求带

积分
70
发表于 2017-3-29 15:47:03 | 显示全部楼层
background-size: cover
回复

使用道具 举报

0

主题

3

帖子

70

积分

新人求带

积分
70
发表于 2017-3-29 15:47:06 | 显示全部楼层
background-size: cover
回复

使用道具 举报

11

主题

25

帖子

1192

积分

专家路上

积分
1192
 楼主| 发表于 2017-3-29 15:48:02 | 显示全部楼层
webwj 发表于 2017-3-29 15:47
background-size: cover

不是背景图片 是image
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|Archiver|手机版|小黑屋|很快微信开发者平台 ( 津ICP备16002644号-1 )

GMT+8, 2022-1-25 01:56 , Processed in 0.025525 second(s), 24 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表