uniapp image 图片自适应

用了uniapp nvue上你会发现图片的高度无法自适应，只能使用api提供的 mode这几个东西，也不支持css width:100%,写死又可以，开发写死就不对了，通过高度计算修改图片样式

1、看到：style，用过vue的都知道这个是改样式的

<image ref=dd class="directory_bg" src="../../static/image/directory/directory_bg.png" :style="imageBgStyle" />

data(){
          
   
	return {
          
   
		imageBgStyle:{
          
   
			width:0,
			height:"0",
			marginTop:"0px",
		}
	}
}

2、根据这个公式计算

(2000*320)/750 (图片的高度 * 屏幕宽度) / 图片实际宽度 我们需要获取图片的信息，里面包含了图片实际的宽高，就是文件夹右击图片获取的图片信息 uni.getImageInfo(OBJECT) 这个object的参数就是文档的，这个参数是object，全是大写的的obj看的是有点懵逼的 * * 同过 获取屏幕的高度

代码示例：

uni.getImageInfo({
          
   
	src: "/static/image/directory/directory_bg.png",
	success(res) {
          
   
		console.log(res)
	},
	fail(){
          
   
	}
})

3、开始计算

有图片信息有屏幕信息开始计算

uni.getImageInfo({
          
   
	src: "/static/image/directory/directory_bg.png",
	success(res) {
          
   
		const getSystemInfo = uni.getSystemInfoSync()
		const {
          
   windowWidth, windowHeight} = getSystemInfo; //屏幕可视宽高
		const {
          
   width, height} = res; // 图片信息的实际宽高
		let imageAdapt = (height * windowWidth) / width; //计算根据宽度的自适应的高度
					
		//设置图片样式
		_than.imageBgStyle.width = `${
            
     windowWidth}px`;
		_than.imageBgStyle.height = `${
            
     imageAdapt}px`;
	},
	fail(){
          
   
	}
})