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

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()
})
相关推荐
liangshanbo12157 分钟前
面试题:Webpack 的 publicPath 有什么作用?
前端·webpack·node.js
mjhcsp8 分钟前
DeepSeek V4.1 Flash 批量处理效能实测
java·前端·数据库
CHEEVEN_QY1 小时前
新能源汽车电池托盘FSW量产的工艺稳定性控制
java·前端·汽车
Alice-YUE1 小时前
前端 × AI:从 Cursor 到 Transformer,一份完整认知路径
前端·人工智能·transformer·ai编程·前端开发·cursor
Code_Solitude2 小时前
C语言:关于二维数组的作业总结
java·c语言·前端
acd120092 小时前
前端随笔:数据明明变了,Vue 页面就是不更新
前端·javascript·vue.js
传人3 小时前
悬停旋转放大和位移效果如何写
前端·javascript·css
zhangzeyuaaa4 小时前
Ruby 方法参数完全指南:默认值、可变参数与关键字参数
前端·python·ruby
粥里有勺糖4 小时前
视野修炼-技术周刊第135期 | 鼠标跟随宠物
前端·github·aigc
粥里有勺糖4 小时前
拿 Codex 协助清理磁盘,Nice!
前端·后端·github