【uniapp 图片展示自适应,等比例缩放】

在uniapp页面展示中会遇到图片展示问题,等比缩放或者自适应view大小。 只固定调整图片的宽度(或者高度)而图片的高度(或者宽度)可以自动根据图片原始比例调节的情况,这种情况下我们可以通过使用image标签的mode属性控制。

组件默认宽度 320px、高度 240px;

注意uniapp图片标签这里是image标签不是img标签

mode 有效值:

mode 有 14 种模式,其中 5 种是缩放模式,9 种是裁剪模式。

重点
我们一般用到红框里面的几种。

具体的使用如下:

//限制宽度,等比缩放图片大小
<image class="image" :src="circleUrl + message.payload.basePath" mode="widthFix" ></image>

//设置图片最大宽度
.image{
		max-width: 400rpx;
	}