大屏可视化适配不同宽高比屏幕,保持网页宽高比不变的代码

ini 复制代码
const el=document.getElementById('app')
let width=1920
let height=1080
el.style.transformOrigin="top left"
function init(){
    const scaleX=innerWidth/width
    const scaleY=innerHeight/height
    const scale=Math.min(scaleX,scaleY)
    const left=(innerWidth-width*scale)/2
    const top=(innerHeight-height*scale) /2

    el.style.transform=`translate(${left}px,${top}px) scale(${scale})`
}
init()
addEventListener('resize',()=>{
    init()
})
相关推荐
小番茄夫斯基2 小时前
Nginx 介绍
前端
小番茄夫斯基2 小时前
如果我一个前端页面要被用户看到,原理是什么,用户怎么通过网址就看到页面的,这背后要怎么弄
前端
迅猛龙办公室2 小时前
Python实现获取星期字符串
java·前端·python
小小荧3 小时前
🚀 Node.js 之父离开 Deno,带着整个团队加入了 Cloudflare
前端·node.js
IllegalCreed3 小时前
人中吕布,卡中 Blackwell:我用三国志14的数值给 687 个大模型排了座位
前端
troy1283 小时前
Java Web 常见面试题(2026 最新整理)
java·前端·hive
子龙_3 小时前
来在网页上用threejs画个蛋白质吧
前端·webgl·three.js
Data analyse4563 小时前
数据埋点设计的事件命名规则校验
服务器·前端·数据分析