使用mode =aspectFill
值 说明
scaleToFill 缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素 图片会变形
aspectFit 缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。 图片会变形
aspectFill 缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。 图片裁剪,不会变形
也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
<view>
<text>图片aspectFill</text>
<image class="img-limt" mode='aspectFill' src="../../img/bg.jpg"></image>
</view>
.img-limt{
width: 400rpx;
height: 400rpx;
}

使用mode =aspectFill
<view>
<text>aspectFit</text>
<image class="img-limt" mode='aspectFit' src="../../img/bg.jpg"></image>
</view>
