vue--如何根据可视窗口的大小自动调节图片大小

首先需要用到两个东西,1:onresize事件,当浏览器发生变化时触发事件 2:clientWidth方法,获取你现在元素下的窗口宽度,然后对你获取到的宽度进行你所需要的比例的运算即可

  mounted () {this.screenWidth = document.body.clientWidth;this.height = (document.body.clientWidth / 1920) * 645;window.onresize = () => {return (() => {this.height = (document.body.clientWidth / 1920) * 645;})()}this.getHomeList();},

在这里插入图片描述这是全屏时banner图片的展现状态
在这里插入图片描述这个是页面缩小的展示状态


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部