首页 > 其他分享 >等比例缩放1920:1080

等比例缩放1920:1080

时间:2024-10-28 09:41:55浏览次数:6  
标签:scale const 1080 缩放 1920 宽高比

1920:1080根据屏幕的改变进行等比例缩放 const windowsChangeSetScale = () => {   const containerWidth = window.innerWidth   const containerHeight = window.innerHeight
  // 目标宽高比   const boxAspectRatio = 1920 / 1080
  // 计算容器的宽高比   const containerAspectRatio = containerWidth / containerHeight
  let scale   if (containerAspectRatio > boxAspectRatio) {     // 容器宽高比大于盒子,说明窗口更宽,需要根据高度缩放     scale = containerHeight / 1080   } else {     // 容器宽高比小于或等于盒子,说明窗口更高或正好匹配宽度     scale = containerWidth / 1920   }
  // 设置缩放   if (MathExampleDiv.value) {     MathExampleDiv.value.style.transform = `scale(${scale})`     MathExampleDiv.value.style.transformOrigin = 'top left' // 保证从左上角进行缩放   } }

标签:scale,const,1080,缩放,1920,宽高比
From: https://www.cnblogs.com/unique-yaobo/p/18509735

相关文章

  • 103. OrbitControls旋转缩放限制
    课程中经常会用到相机控件OrbitControls的不同功能,本节课就会大家补充新的知识点,比如控制缩放的最大最小范围,比如限制旋转的角度范围,比如禁止平移。禁止右键平移.enablePan属性比如一个展示一个三维场景,你不希望鼠标右键拖动会产生一个平移效果。可以通过设置相机空间对象Or......
  • 学习笔记(八):ArkUi-线性布局 (Row/Column)自适应拉伸、缩放、延伸
    一、自适应拉伸在线性布局下,常用空白填充组件Blank,在容器主轴方向自动填充空白空间,达到自适应拉伸效果示例:实现以下常用ui布局,左侧标题文本,右侧内容文本,中间空白区域  二、自适应缩放是指子元素随容器尺寸的变化而按照预设的比例(权重)自动调整尺寸,适应各种不同大小的设......
  • [LibreOffice Calc]打印表格时自动缩放到与纸张尺寸匹配
    造冰箱的大熊猫@cnblogs2024/10/22,LinuxMint有没有遇到过打印表格时,表格太宽需要打印到多页上的情况,这时候手动缩放表格太费劲,如何自动呢?1、打开预览,File>>PrintPreview,或者Shift+Ctrl+O 2、在工具栏中点击FormatPage按钮(带齿轮那个) 3、在PageStyle对话框中,选择S......
  • flask影响电影票房因素的数据分析及可视化系统 毕业设计程序源码19201
    摘 要现在电影行业飞速发展,传统影响电影票房因素的数据分析及可视化方式己经逐渐跟不上时代变化的速度。在计算机行业发达的今天,希望利用现代爬虫技术的优势,提高数据分析及可视化效率及效果。本系统采用的是 Python 语言,使用 PyCharm 这一款开发工具,综合运用了 Tkinte......
  • WebGl 缩放矩阵
    缩放矩阵是线性代数中的一种矩阵,用于描述图形在空间中沿着各个坐标轴进行均匀缩放的变换。在3D图形编程中,缩放矩阵通常用于调整物体的大小,而不改变其形状。|x000||0y00||00z0||0001|其中,(x,y,z)是缩放向量,表示沿着x、y、z轴的缩放比......
  • WebGl 实现图片平移、缩放和旋转
    1.图片平移在WebGL中实现图片平移,可以通过修改顶点着色器中的顶点位置来实现。平移的基本思想是将每个顶点的位置向量沿着指定的方向(通常是x轴和y轴)进行平移。在顶点着色器中,可以通过添加或减去一个统一的偏移量(uniformvariable)来实现这一点。例如,如果要在x轴和y轴上分别平移......
  • MH2457国产屏驱MCU,可驱动1080P分辨率屏幕
    MH2457屏驱MCU集成与IEEE-802.3-2002兼容的介质访问控制器(MAC),通过工业标准的介质独立接口(MII)或精简介质独立接口(RMII)进行以太网LAN通信。微控制器需要外部物理接口器件(PHY)以连接到物理LAN总线(双绞线、光纤等)。PHY连至器件的MII端口,对于MII使用17个......
  • qt图像算法—图像的缩放之c++实现(不调包)
     1.基本原理  图像的缩放一般使用插值算法,而本章将介绍两种常用插值算法:最临近插值法和双线性插值法  1.最临近插值法  将浮点数的位置坐标,进行四舍五入找到原图像的整型坐标即可,具体操作可见下面的公式,其中原图像坐标为(x,y),输出图像坐标为(i,j),比例系数为fx和fy。......
  • 720和1080p区别
    720和1080p内容和尺寸大小没有区别,只是在像素上面有区别。720p的分辨率低于1080p的分辨率。1080P是指分辨率达到1920X1080,720p是指分辨率为1280X720。720P又叫半高清,或者叫标准高清,是高清的最低标准,只有达到了720P这个标准才能叫高清视频。一、720和1080p区别720和1080p内容......
  • OpenGL模型变换平移、缩放、旋转注意事项
    一、概述在OpenGL中,想要对物体(模型)进行操作,如:平移、缩放、旋转。其顺序不能错,不同的顺序会给出不同的结果网上的博客大家看过后要慎重使用,好多都是错误的,在实际项目中使用前最好先写demo进行验证,不然一旦整合到项目中,排错成本将会非常高。三者的顺序是:理......