[uniapp image display adaptive, proportional scaling]

In the uniapp page display, you will encounter image display problems, proportional scaling or adaptive view size. Only fixedly adjust the width (or height) of the picture and the height (or width) of the picture can be automatically adjusted according to the original proportion of the picture. In this case, we can control it by using the mode attribute of the image tag.

The default width of the component is 320px and the height is 240px;

Note that the uniapp image tag is an image tag here, not an img tag

mode Valid values:

mode There are 14 modes, 5 of which are scaling modes and 9 are cropping modes.

We generally use the ones in the red box.

The specific use is as follows:

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

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