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

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()
})
相关推荐
en.en..4 分钟前
C语言 static函数与头文件封装规范
java·c语言·前端
计算机魔术师8 分钟前
旅途中用手机远程控制电脑?电脑不在身边,ToDesk/UU远程/TeamViewer移动端深度实测
前端
风月说与山鬼22 分钟前
三、Tailwind CSS——排版与文字样式
前端·css·tailwind css
eokred36 分钟前
图片预览组件的另一种设计:Headless、可组合、开箱即用
前端·react
南雨北斗41 分钟前
解决web开发中前后端跨域通信(session失效问题)
前端
Y3815326621 小时前
body-upload-js
前端·javascript·浏览器·深拷贝·数据克隆
Apifox1 小时前
Apifox 8 月更新|调试、权限与协作体验持续优化
前端·后端·测试
杉氧1 小时前
React 灵魂:深入剖析 Hooks 与副作用(Side Effects)陷阱
android·前端·react native
Json____1 小时前
java-宿舍安全卫生检查系统项目源码
java·前端·javascript·课程设计·it学习·wwwoop.com