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

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()
})
相关推荐
wuhen_n5 小时前
前端工程师进阶提示词工程实战
前端·langchain·ai编程
GISer_Jing5 小时前
Claude Code MCP Server 集成全解析
前端·人工智能·ai·架构
蚰蜒螟5 小时前
走进 Linux 内核:从 touch 命令到磁盘 inode 的完整旅程
java·linux·前端
因_崔斯汀5 小时前
用 AI 编程助手从零生成 3D 智慧校园数据大屏 —— Claude Code 实战全记录
前端
前端Hardy6 小时前
CSS 动画真的比 JS 快?Josh Comeau 做了组实验,结果跟直觉不一样
前端·javascript·后端
自进化Agent智能体6 小时前
MCP与Hooks:让AI Agent安全连接一切的治理框架
前端
明天一点6 小时前
Cloudflare 通知转发钉钉机器人
前端·后端
前端Hardy6 小时前
前端日历组件,要变天了?Schedule-X v4.6 彻底杀疯了
前端·javascript·后端
微扬嘴角6 小时前
React快速入门
前端·react.js·前端框架
ZC跨境爬虫6 小时前
跟着 MDN 学CSS day_40:(Flexbox实战技能测试)
前端·css·ui·html·tensorflow