实际工作中会经常遇到图片处理问题,服务端同一个接口中返回的多张图片大小尺寸可能是不同的,但是页面渲染时如何保持图片显示大小一致,本文说下自己的做法.
最简单的办法是保持包裹image的view大小与image中大小一致,实现方式如下:
style中:
.image_class{
width: 280rpx;
height: 160rpx;
image{
width: 280rpx;
height: 160rpx;
}
}
template中:
<view>
<view class="image_class" v-if="item in imgList" :key=item.id>
<image :src="item.imageUrl" ></image>
</view>
</view>
实现效果如下:
注意在image标签中设置height与width比例都为100%不起作用.简单记录一下,希望对有同样问题