uniapp image 图片自适应
用了uniapp nvue上你会发现图片的高度无法自适应,只能使用api提供的 mode这几个东西,也不支持css width:100%,写死又可以,开发写死就不对了,通过高度计算修改图片样式1、看到:style,用过vue的都知道这个是改样式的<image ref='dd' class="directory_bg" src="../../static/image/directory/dir
·
用了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 (图片的高度 * 屏幕宽度) / 图片实际宽度
我们需要获取图片的信息,里面包含了图片实际的宽高,就是文件夹右击图片获取的图片信息
uniapp 获取图片信息api
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(){
}
})
更多推荐
已为社区贡献9条内容
所有评论(0)