微信小程序的組件和普通的 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 裁剪模式，不縮放圖片，只顯示圖片的右下邊區域。