image-mode.uvue

<template>
	<scroll-view>
		<page-head :title="title"></page-head>
		<view class="uni-padding-wrap uni-common-mt">
			<view class="uni-title">
				<text class="uni-title-text">支持的图片缩放模式示例</text>
			</view>
			<view v-for="(item,index) in data" :key="index">
				<text class="uni-subtitle-text">{{item.mode}}: {{item.description}}</text>
				<view class="uni-center" style="background:#FFFFFF;">
					<image class="image" :mode="item.mode" src="/static/shuijiao.jpg"></image>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'image-mode',
				data: [
					{
						mode: 'scaleToFill',
						description: '不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素'
					},
					{
						mode: 'aspectFit',
						description: '保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来'
					},
					{
						mode: 'aspectFill',
						description: '保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取'
					},
					{
						mode: 'top',
						description: '不缩放图片，只显示图片的顶部区域'
					},
					{
						mode: 'bottom',
						description: '不缩放图片，只显示图片的底部区域'
					},
					{
						mode: 'center',
						description: '不缩放图片，只显示图片的中间区域'
					},
					{
						mode: 'left',
						description: '不缩放图片，只显示图片的左边区域'
					},
					{
						mode: 'right',
						description: '不缩放图片，只显示图片的右边区域'
					},
					{
						mode: 'top left',
						description: '不缩放图片，只显示图片的左上边区域'
					},
					{
						mode: 'top right',
						description: '不缩放图片，只显示图片的右上边区域'
					},
					{
						mode: 'bottom left',
						description: '不缩放图片，只显示图片的左下边区域'
					},
					{
						mode: 'bottom right',
						description: '不缩放图片，只显示图片的右下边区域'
					},
					{
						mode: 'widthFix',
						description: '宽度不变，高度自动变化，保持原图宽高比不变'
					},
					{
						mode: 'heightFix',
						description: '高度不变，宽度自动变化，保持原图宽高比不变'
					}
				] as Array<ImageMode>
			}
		}
	}
	
	type ImageMode = {
		mode : string
		description : string
	}
	
</script>

<style>
	.image {
		margin: 40rpx auto;
		width: 200rpx;
		height: 200rpx;
		background-color: #eeeeee;
	}
</style>