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

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()
})
相关推荐
SuperHeroWu733 分钟前
【鸿蒙基础入门】概念理解和学习方法论说明
前端·学习·华为·开源·harmonyos·鸿蒙·移动端
Full Stack Developme42 分钟前
MyBatis-Plus 流式查询教程
前端·python·mybatis
用户412467508371 小时前
用 Locust 压测一个网站,记录一下学习过程
前端
木斯佳1 小时前
前端八股文面经大全:字节TikTok前端一面(2026-04-17)·面经深度解析
前端·面试·八股·面经
SarL EMEN1 小时前
海康威视摄像头ISUP(原EHOME协议) 摄像头实时预览springboot 版本java实现,并可以在浏览器vue前端播放(附带源码)
java·前端·spring boot
天渺工作室2 小时前
Svelte/SvelteKit 多语言配置指南
前端·svelte
咸鱼翻身了么2 小时前
微服务-乾坤
前端
Wect2 小时前
深度解析浏览器本地存储:原理、方案与实战指南
前端·面试·浏览器
前端那点事2 小时前
Vue自定义指令全解析(Vue2+Vue3适配)| 底层DOM操作必备
前端