微信小程式的元件和普通的 HTML 有所不同，比如 HTML 的 div 在小程式裡面是 view ，HTML 的 span 在小程式裡是 text 。

因為 uni-app 要相容多終端和各種小程式，所以它的語法和微信小程式是基本一致的。

今天就整理一下小程式的圖片元件（image）的縮放和裁切顯示實現，下面以 uni-app 為例。

如果在頁面中增加一個 <image />標籤，不設定任何樣式的話，它會佔據很大一塊空間。檢視 uni-app 原始碼可以發現，圖片元件有一個 320px 的寬度和 240px 的高度。

/* CSS */
uni-image {
    width: 320px;
    height: 240px;
    display: inline-block;
    overflow: hidden;
    position: relative
}
 

這樣，如果只給圖片設定寬度或者高度的話，會導致圖片被拉伸。

一般給 image 設定大小的時候要同時指定寬度和高度：

/* CSS */
.image {
    width: 150px;
    height: 150px;
}

如果圖片的長度和寬度不固定，可以設定寬度（或高度），然後高度（或寬度）自適應：

/* CSS */
.image {
    width: 150px;
    height: auto;
}

但如果一個列表中的圖片大小不一，就比較麻煩。不過不用擔心，微信小程式為 image 元件提供了一個 mode 屬性。

mode 屬性不僅可以讓圖片等比例縮放，還可以自動裁切，按照意願進行顯示。

比如等比例顯示，我們可以給圖片設定一個寬度，然後設定 mode="widthFix" ，這樣圖片也不會被拉伸：

<!-- HTML -->
<image class="image" mode="widthFix" />

/* CSS */
.image {
    width: 150px;
}

比如使用者頭像，圖片的寬高是固定的，圖片如果比較長，可以使用mode="aspectFill"等比例縮放，自動裁剪短邊填充：

<!-- HTML -->
<image class="image" mode="aspectFill" />

/* CSS */
.image {
    width: 150px;
    height: 150px;
}
 

這樣即可以按照尺寸顯示圖片，又不會被拉伸了。

image 元件的 mode 屬性還有很多引數，使用起來非常靈活：

scaleToFill 縮放模式，不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素。

aspectFit縮放模式，保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來。也就是說，可以完整地將圖片顯示出來。

aspectFill 縮放模式，保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來。也就是說，圖片通常只在水平或垂直方向是完整的，另一個方向將會發生擷取。

widthFix 縮放模式，寬度不變，高度自動變化，保持原圖寬高比不變。

heightFix 縮放模式，高度不變，寬度自動變化，保持原圖寬高比不變。

top 裁剪模式，不縮放圖片，只顯示圖片的頂部區域。

bottom 裁剪模式，不縮放圖片，只顯示圖片的底部區域。

center 裁剪模式，不縮放圖片，只顯示圖片的中間區域。

left 裁剪模式，不縮放圖片，只顯示圖片的左邊區域。

right 裁剪模式，不縮放圖片，只顯示圖片的右邊區域。

top left 裁剪模式，不縮放圖片，只顯示圖片的左上邊區域。

top right 裁剪模式，不縮放圖片，只顯示圖片的右上邊區域。

bottom left 裁剪模式，不縮放圖片，只顯示圖片的左下邊區域。

bottom right 裁剪模式，不縮放圖片，只顯示圖片的右下邊區域。