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

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()
})
相关推荐
静默回滚7 分钟前
图片能显示,画进canvas却空白:像素面积上限
前端
补码缩写7 分钟前
canvas大图内存怎么算:宽×高×4只是第一份
前端
coding漫漫长路11 分钟前
img.decode()报错的图能画,load成功的却是空的
前端
不可能片场14 分钟前
AI视频首尾帧控制 用参考图定住镜头
前端·electron
修炼的dance19 分钟前
canvas最大能开多大:先看面积,再看导出格式
前端
薛一半31 分钟前
React-Redux核心原理与容器组件实战
前端·javascript·react.js
做运维的阿瑞31 分钟前
自连接、交叉连接与复杂 JOIN:一条问题链讲透
前端·数据库·mysql
言乐642 分钟前
JavaScript概括前端原理
开发语言·前端·javascript·python·ecmascript
回眸&啤酒鸭1 小时前
DeepSeek V4.1 Flash 批量处理实战指南
服务器·前端·javascript
用户3374096924261 小时前
2026-09-27-Qwen-Image-2.1-1660Ti本地部署实战
前端