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

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()
})
相关推荐
今年下半年5 小时前
【前端】Vue2 项目 ECharts 统计图表组件封装与使用实践(附组件源码)
前端·javascript·echarts
西索斯coding5 小时前
在 中接入 教程:p配置、m填写、扩展思考参数一篇就够(2)
java·前端·javascript·ai
代码猎人5 小时前
前端怎么优化项目基础架构
前端
__sjfzllv___6 小时前
在职前端Leader学习/转行 AI Agent -DAY78
前端
代码猎人6 小时前
前端怎么封装工具类
前端
deli0076 小时前
PDF 合并别再用在线工具:12 份文件浏览器里合完,实测不上传
前端
shuoshuohaohao6 小时前
SpringBoot3-web开发-静态资源-内容协商
前端
kiros_wang6 小时前
RDB关系数据库实战:增删改查、事务、分页、版本迁移
前端
用户1733598075376 小时前
纯前端 PDF 双面打印避坑指南:翻页顺序错了整个白印?
前端·javascript·vue.js
庖丁解牛6 小时前
第四课:循环,让电脑重复做事(4)
前端