固定宽高比

来源：15-4 浏览器缩放时锁定屏幕宽高比功能开发

y9527

2020-08-04

老师，利用这种宽高比方式自适应方案可行吗?事先设定好大屏的宽高，也可以在屏幕上完整的展示啊

		this.pWidth = document.documentElement.clientWidth
        this.pHeight = document.documentElement.clientHeight
        const w = this.$refs.bg.offsetWidth
        const h = this.$refs.bg.offsetHeight
        let scalX = this.pWidth / w
        const scalY = this.pHeight / h
        let ratio = scalX > scalY ? scalY : scalX
        this.$refs.bg.style.transform = 'scale(' + ratio + ',' + ratio + ')'
        const tLeft = (this.pWidth - w) / 2
        const tTop = (this.pHeight - h) / 2
        this.$refs.bg.style.left = tLeft + 'px'
        this.$refs.bg.style.top = tTop + 'px'

图片描述

写回答

1回答

扬_灵

2020-08-05

同学你好，你设置的这个样式当页面缩放的时候内容缩放的是要各自计算宽高比的而不是取两者比率之间最小的。而且页面缩放的时候显示内容会距离头部和顶部也会有变化，这样显示的效果并不是宽高比自适应。如果不能满足你的需求，可以继续追问。

y9527

我看阿里的是宽高比固定，缩小后底部留空,页面也不会拉伸，手机、电脑端看也能很好的展示，这种做法是不是更好些？https://datav.aliyuncs.com/share/5f7b92ad758dc9c536d4101fb68e9209?spm=5176.15036128.0.0.686a1f409EZEma

2020-08-05

共1条回复

数据可视化入门到精通-打造前端差异化竞争力

同级别前端，掌握数据可视化薪资更高

1520 学习 · 1043 问题

查看课程

相似问题

数据大屏为什么要固定宽高比？

回答 2

关于锁定宽高比

回答 1

没有设置宽高，绘制不了直线图

回答 1

老师，第3-10课，高宽比判断这里有问题吧

回答 1

关于rem和固定宽高比

回答 1

打开慕课网App查看更多内容