一、總覽
Image的mode是指圖片裁剪、縮放的模式,共有14個合法值,分別是:
/** 縮放模式,不保持縱橫比縮放圖片,使圖片的寬高完全拉伸至填滿 image 元素 */ scaleToFill /** 縮放模式,保持縱橫比縮放圖片,使圖片的長邊能完全顯示出來。也就是說,可以完整地將圖片顯示出來。 */ aspectFit /** 縮放模式,保持縱橫比縮放圖片,只保證圖片的短邊能完全顯示出來。也就是說,圖片通常只在水平或垂直方向是完整的,另一個方向將會發生截取。 */ aspectFill /** 縮放模式,寬度不變,高度自動變化,保持原圖寬高比不變 */ widthFix /** 縮放模式,高度不變,寬度自動變化,保持原圖寬高比不變 */ heightFix /** 裁剪模式,不縮放圖片,只顯示圖片的頂部區域 */ top /** 裁剪模式,不縮放圖片,只顯示圖片的底部區域 */ bottom /** 裁剪模式,不縮放圖片,只顯示圖片的中間區域 */ center /** 裁剪模式,不縮放圖片,只顯示圖片的左邊區域 */ left /** 裁剪模式,不縮放圖片,只顯示圖片的右邊區域 */ right /** 裁剪模式,不縮放圖片,只顯示圖片的左上邊區域 */ 'top left' /** 裁剪模式,不縮放圖片,只顯示圖片的右上邊區域 */ 'top right' /** 裁剪模式,不縮放圖片,只顯示圖片的左下邊區域 */ 'bottom left' /** 裁剪模式,不縮放圖片,只顯示圖片的右下邊區域 */ 'bottom right'
二、例子
🍊看字比較麻煩,下面看圖吧👇🏻
0、原圖
(圖一)
(圖二)
1、scaleToFill(默認) 縮放 && 拉伸 && 完整
2、aspectFit 縮放 && 不拉伸 && 完整
3、aspectFill(常用) 縮放 && 不拉伸 && 不完整
4、widthFix
4、heightFix
5、其他位置(top、bottom、left、right……) 不縮放 && 不拉伸 && 不完整
END---------------------------------
Every day is Sunday
每天對於我而言都像週末一樣愉快
Every day's a new day
每天對於我而言都是嶄新的一天
To be with you
只要和你一起
To be with you
悲傷也會變成快樂