如果我们想要在页面上展示图片就需要使用到image标签。

这部分最重要的是图片的裁剪，图片的裁剪和缩放属性：

mode    图片裁剪、缩放的模式    默认值是'scaleToFill'

我将用两张图片对属性进行演示，一张是pic1.jpg（宽更长），一张pic2.jpg（高更长） 。

图片放在static文件夹中。

<template>
	<image src="../../static/pic1.jpg" mode=""></image>
	<image src="../../static/pic2.jpg" mode=""></image>
</template>

<style lang="scss">
	.pic1{
		width: 300px;
		height: 300px;
	}
	.pic2{
		width: 300px;
		height: 300px;
	}
	
</style>

我们会发现这两张图都有明显的压缩。 

一、裁剪的属性

 二、aspectFit属性

aspectFit

保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。

 

三、aspectFill属性

这个属性是裁剪最常用的属性。

aspectFill

保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

 

四、widthFix属性

widthFix

宽度不变，高度自动变化，保持原图宽高比不变

五、heightFix属性

heightFix

高度不变，宽度自动变化，保持原图宽高比不变