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

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()
})
相关推荐
Cobyte几秒前
AI 的个人便签纸:Claude Code 的 TodoWrite 模式
前端·后端·aigc
风兮雨露9 分钟前
Java 从入门到精通,前端资料
java·开发语言·前端
ZC跨境爬虫13 分钟前
跟着 MDN 学CSS day_43:CSS布局挑战——从浮动到弹性盒与栅格的综合实践
前端·css·ui·html·tensorflow
Qres82122 分钟前
Hexo博客本地配置
前端·博客·hexo
Bigger23 分钟前
GitLab-Runner + AI 代码审查服务 + 远程大模型 全套部署运维实战
前端·ci/cd·ai编程
_xaboy24 分钟前
开源AI表单设计器 FcDesigner v3.5 版本发布!
前端·vue.js·低代码·开源·表单
爱讲故事的24 分钟前
操作系统第三讲:Context Switch —— 用户态如何安全地进入内核态?
前端·javascript·安全
light blue bird35 分钟前
支轴事件任务线程执行工序路径的图表组件
前端·jvm·windows
终端行者35 分钟前
企业级 Jenkins Pipeline 实战Docker构建前端+Ansible发布
前端·ci/cd·docker·jenkins
风之舞_yjf42 分钟前
Vue基础(33)_web Storage(web存储)
前端·javascript·vue.js