只需要添加属性 mode="者慎widthFix"
<image class="img" src="../images/1.png" mode="widthFix">
设置宽首耐敬度100%,
.img{width: 100%}
这样就可以实亩悉现图片宽度100%高度自适应,图片不会拉伸
wxml部分:<image src="../images/xwbanner.png" mode="widthFix" bindload="imageLoad" style="width:{{ images[index].width }}rpxheight:{{ images[index].height }}rpx" ></image>
wxss部分:烂逗碰
image{
width:100%;
}
js部分:
Page({
data: {
images:{}
},
imageLoad: function(e){
var $width=e.detail.width,//获取饥谈图片真实宽度
$height=e.detail.height,
ratio=$width/$height //图片的真实宽高比例
var viewWidth=718, //设置图片显示宽度,左右留有指孝16rpx边距
viewHeight=718/ratio //计算的高度值
var image=this.data.images
//将图片的datadata-index作为image对象的key,然后存储图片的宽高值
image[e.target.dataset.index]={
width:viewWidth,
height:viewHeight
}
this.setData({
images:image
})
},
})
小程序的image组件提供了缩放的模式选择,默认的scaletofill就是设置固定的宽高模式比较少使用,更多的是需要自适应宽高的情况。
widthfix多适用于通栏,width:100%,高度不同设备销孙自适应的情况。此时会按照原图比列自动缩放高度,常用于轮播图。
aspectFill多用用在固定大小的范围内显示,区别是可以保留一边,除去通栏外一般用处较多。
个别情况下需要宏斗链图片始终居中缩放,多用在用户头像圆环之类,一般留在保留中心蔽孙内容的部分,文档中暂没,需要单独设置。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)