固定宽高比

Question

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

		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'

Answer 1

扬_灵 2020-08-05 09:54:37

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

• 提问者 y9527 #1

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