uniapp 图片自动缩放

<template>
	<view class="dlz-fx-column">
	  <movable-area>
	    <movable-view  direction="all" scale-value="1" scale-min="1" scale="true" scale-max="4">
	      <image
	      		v-if="imageUrl"
	      		class="lookimg"
	      		:src="imageUrl"
	      		mode="widthFix"
	      ></image>
	    </movable-view>
	  </movable-area>	
	</view> 
</template>

<script>
import {getYardImage} from "@/api/visualize.js"
export default {
	name: 'query',
	data() {
		return {
			imageUrl:''
			
		}
	},
	mounted(){
		getYardImage().then((res)=>{
			this.imageUrl = res.data
			console.log(res,'getYardImage')
		})
	},
	onShow(){
		
	},
	methods: {
		
	
	}
}
</script>

<style lang="scss" scoped>
.dlz-fx-column{
		&>movable-area {	
			flex: 1;
			height: 100%;		
			width: 100%;
			position:fixed;
			overflow: hidden;
			left: 0;
			z-index: 1000;
			movable-view{
				display: flex;
				justify-content: center;
				width: 100%;
				height: 100%;
				image {
					width: 100%;
					height: 100%;
				}
			}
		
		}
}



</style>