请选择 进入手机版 | 继续访问电脑版
开启辅助访问
快捷导航
查看: 83|回复: 2

插入的图片前后会有大段空白区域

[复制链接]

该用户从未签到

1

主题

1

帖子

5

积分

新手上路

Rank: 1

积分
5
发表于 2016-12-19 15:16:21 | 显示全部楼层 |阅读模式
图片像素为1080*100直接插图是这种效果(test文字指示下一行的位置)


10.png

在image标签加入mode="aspectFit"后,图片宽高比正常,但是前后会有留白,如下图

11.png

如果手动设置style="width:750rxp;height:69.4rpx;"可以得到我需要的效果

12.png

请问如何不通过手动设置宽高像素使图片自动适应宽高比?为什么我用mode="aspectFit"会使图片前后留下空白?
回复

使用道具 举报

该用户从未签到

2

主题

55

帖子

207

积分

版主

Rank: 7Rank: 7Rank: 7

积分
207
发表于 2016-12-19 18:04:10 | 显示全部楼层
因为image组件有默认尺寸,我这测试是320x240, 所以, 如果不指定宽高的话就会出现上述情况。
建议:
1)首先image对象这么定义
<image bindload="imgLoaded" src="xxxxxx.png" style="width:{{imageWidth}}px;height:{{imageheight}}px"/>
//在image组件对象上绑定 load事件(bindload), 图片加载完后。会调用bindload对应的函数, 在里面获取宽高

2)data对象里加上imageWidth,imageHeight
data: {
    imageWidth:300,
    imageHeight:240
  },

3)最后在imgLoad函数中获取高宽, 设置到imageWidth, imageHeight
  function imgLoaded(e){
    this.setData({imageWidth:e.detail.width,imageHeight:e.detail.height});
}
当然, 其中你可以获取一下系统屏幕的宽度及高度, 做一些必要的计算和约束, 来保证图片的正常显示。
回复 支持 反对

使用道具 举报

该用户从未签到

7

主题

13

帖子

202

积分

中级会员

Rank: 3Rank: 3

积分
202
发表于 2017-1-10 17:38:24 | 显示全部楼层
flyfire 发表于 2016-12-19 18:04
因为image组件有默认尺寸,我这测试是320x240, 所以, 如果不指定宽高的话就会出现上述情况。
建议:
1)首 ...

如果是个循环里面多个图片,定宽但不定高,怎样设置呢?如图片上的图片;
0]LY4LN}369Z]2KV$IU`@PX.png
回复 支持 反对

使用道具 举报

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

本版积分规则

关闭

进站必读上一条 /1 下一条