使用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>
