【Uniapp-Vue3】image媒体组件属性
如果我们想要在页面上展示图片就需要使用到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 高度不变，宽度自动变化，保持原图宽高比不变
