image 組件加mode屬性
import { View, Text, Image } from '@tarojs/components'
<Image key={idx} src={`${commonUrl}?iobsKey=${img.iobsKey}&fileName=${img.fileName}`}
mode="widthFix" className="center-image"
onClick={this.onPreViewImage.bind(this, `${commonUrl}?iobsKey=${img.iobsKey}&fileName=${img.fileName}`)}
/>
.center-image {
padding-top: 20px;
width: 100%; //設置寬度
}
mode 的合法值
| 值 | 說明 | 最低版本 |
|---|---|---|
| scaleToFill | 縮放模式，不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素 | |
| aspectFit | 縮放模式，保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來。也就是說，可以完整地將圖片顯示出來。 | |
| aspectFill | 縮放模式，保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來。也就是說，圖片通常只在水平或垂直方向是完整的，另一個方向將會發生截取。 | |
| widthFix | 縮放模式，寬度不變，高度自動變化，保持原圖寬高比不變 | |
| heightFix | 縮放模式，高度不變，寬度自動變化，保持原圖寬高比不變 | 2.10.3 |
| top | 裁剪模式，不縮放圖片，只顯示圖片的頂部區域 | |
| bottom | 裁剪模式，不縮放圖片，只顯示圖片的底部區域 | |
| center | 裁剪模式，不縮放圖片，只顯示圖片的中間區域 | |
| left | 裁剪模式，不縮放圖片，只顯示圖片的左邊區域 | |
| right | 裁剪模式，不縮放圖片，只顯示圖片的右邊區域 | |
| top left | 裁剪模式，不縮放圖片，只顯示圖片的左上邊區域 | |
| top right | 裁剪模式，不縮放圖片，只顯示圖片的右上邊區域 | |
| bottom left | 裁剪模式，不縮放圖片，只顯示圖片的左下邊區域 | |
| bottom right | 裁剪模式，不縮放圖片，只顯示圖片的右下邊區域 |