uniapp image标签图片跑偏终极解决办法

Posted 2023-03-29 三个人工作室

目录

• uniapp image 的mode常用属性
• • aspectFit 缩放显示图片全部
  • aspectFill 缩放填满容器，但是图片可能显示不全
  • widthFix 以宽度为基准，等比缩放长
  • heightFix 以高度为基准，等比缩放宽

uniapp image 的mode常用属性

uniapp当中，在image外面包view，进行设置，可以使用mode解决image图片跑偏的问题。

<view v-for="(item,index) in pics1" class="cu-bar bg-white" style="">
	<image :src="BaseUrl+'/'+item" mode="widthFix" style="width: 100%;"></image>
</view>

aspectFit 缩放显示图片全部

aspectFill 缩放填满容器，但是图片可能显示不全

widthFix 以宽度为基准，等比缩放长

heightFix 以高度为基准，等比缩放宽