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

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()
})
相关推荐
liangshanbo121513 小时前
高级前端面试题:package.json 常见字段
前端·json
CappuccinoRose14 小时前
输入事件进阶
前端·javascript·输入事件
liangshanbo121515 小时前
面试题:前端工程化中 Tree Shaking的原理是什么?
前端·treeshaking
补码缩写16 小时前
视频跳转触发了seeked,画面就到位了吗
前端
库拉镜像AI牛牛16 小时前
漫剧工作室量产方案:依托知漫剧 AI 短剧降本增效
大数据·服务器·前端·人工智能·语音识别
不可能片场16 小时前
内容运营自动化 用相似度拦住撞车选题
前端·electron
静默回滚16 小时前
视频进度条跳回去,先别改事件监听
前端
Lank_M16 小时前
MP4和WebM导出后为何起播与拖动不同
前端
用户55084929025616 小时前
前端本地存储怎么选:Cookie、localStorage、sessionStorage、IndexedDB 的取舍
前端
用户55084929025616 小时前
Git 日常命令与分支协作流程:从提交到合并的实战梳理
前端