JavaScript元素根据父级元素宽高缩放

news2025/1/21 12:07:34
/**
     * 等比缩放
     * @param wrap 外部容器
     * @param container 待缩放的容器
     * @returns {{width: number, height: number}}
     * 返回值:width:宽度, height:高度
    */
    aspectRatio(wrap: any, container: any) {
      // w = h / ratio, h = w * ratio
      const wrapW = wrap.width;
      const wrapH = wrap.height;
      let cW = container.width;
      let cH = container.height;
      const rc = cW / cH;
 
      if (rc > 1) {
        // const w = wrapH * ratio;
        if (cW <= wrapW) {
          cW = wrapW;
          cH = wrapW / rc;
        }
      } else if (rc < 1) { // w:h = w1:h1 =>
        if (cH <= wrapH) {
          cH = wrapH;
          cW = rc * cH;
        }
      } else if (rc === 1) {
        const v = wrapW > wrapH ? wrapH : wrapW;
        cH = v;
        cW = v;
      }
 
      return {
        width: cW,
        height: cH,
      };
    }

原文链接

JavaScript元素根据父级元素宽高缩放

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1347751.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

PyTorch中常用的工具(3)TensorBoard

文章目录 前言3 可视化工具3.1 TensorBoard 前言 在训练神经网络的过程中需要用到很多的工具&#xff0c;最重要的是数据处理、可视化和GPU加速。本章主要介绍PyTorch在这些方面常用的工具模块&#xff0c;合理使用这些工具可以极大地提高编程效率。 由于内容较多&#xff0c…

Unity坦克大战开发全流程——游戏场景——游戏界面——设置界面复用

游戏场景——游戏界面——设置界面复用 先将开始场景当中的设置面板复制过来 由于设置面板挂载的脚本都是相同的&#xff0c;在BeginScene中关闭设置面板时不会报空&#xff0c;而在GameScene中关闭设置面板时却会报空&#xff0c;这是因为监听事件中的单例模式调用的实例是Beg…

【时钟】分布式时钟HLC|Logical Time|Vector Clock|True Time

目录 简略 详细 附录 1 分布式系统不能使用NTP的原因 简略 分布式系统中不同于单机系统不能使用NTP(网络时间协议&#xff08;Network Time Protocol&#xff09;)来获取时间&#xff0c;所以我们需要一个特别的方式来获取分布式系统中的时间&#xff0c;mvcc也是使用time保证读…

Debezium发布历史40

原文地址&#xff1a; https://debezium.io/blog/2018/09/20/materializing-aggregate-views-with-hibernate-and-debezium/ 欢迎关注留言&#xff0c;我是收集整理小能手&#xff0c;工具翻译&#xff0c;仅供参考&#xff0c;笔芯笔芯. 使用 Hibernate 和 Debezium 实现聚合…

Linux安装Oracle调用dbca无响应和密码问题

Linux服务器下调用dbca无响应&#xff0c;或弹出如下提示&#xff1a; 则需要在Linux命令行窗口&#xff0c;输入如下命令即可 export DISPLAYip:0.0 注意&#xff1a;该ip应该为可显示图形桌面的机器ip地址。 该桌面需要已经安装了Xmanager-Passive&#xff08;比如 Xmanag…

Langchain-Chatchat开源库使用的随笔记(一)

笔者最近在研究Langchain-Chatchat&#xff0c;所以本篇作为随笔记进行记录。 最近核心探索的是知识库的使用&#xff0c;其中关于文档如何进行分块的详细&#xff0c;可以参考笔者的另几篇文章&#xff1a; 大模型RAG 场景、数据、应用难点与解决&#xff08;四&#xff09;R…

2024 Win 安装Oracle12C

文章目录 一、下载1.1 官方下载1.2 官方Archive下载1.3 博主提供 二、安装2.1 解压2.2 安装 三、连接3.1 SQL Plus3.2 切换到容器数据库orclpdb3.3 查询SID 四、查看数据4.1 SQL Develop 连接4.2 创建新用户4.3 develop 直接创建新用户4.3.2 SQL 错误: ORA-65096: 公用用户名或…

Django 学习教程- Django 入门案例

Django学习教程系列 Django学习教程-介绍与安装 前言 本教程是为 Django 5.0 编写的&#xff0c;它支持 Python 3.10 至以上。如果 Django 版本不匹配&#xff0c;可以参考教程 使用右下角的版本切换器来获取你的 Django 版本 &#xff0c;或将 Django 更新到最新版本。如果…

Select工作原理

I/O多路复用是一种并发处理的机制&#xff0c;允许一个进程通过一种机制监视多个描述符&#xff0c;从而在有多个I/O操作需要处理时选择其中之一进行服务。select 函数是一种常见的实现 I/O 多路复用的系统调用&#xff0c;它允许一个进程同时监视多个文件描述符的可读性、可写…

Elasticsearch-8.11.1 (2+1)HA(高可用)集群部署

目录 一、环境描述 二、安装 ES 2.1 下载Elasticsearch 2.2 解压Elasticsearch 2.3 创建es服务账号/密码 2.3 修改服务器配置 2.4 配置节点 2.4.1 配置说明 2.4.2 配置高可用集群 2.4.2.1 maser节点服务配置 2.4.2.2 node1 节点服务配置 2.4.2.3 node2 节点服务配置…

HarmonyOS4.0系统性深入开发10卡片事件能力说明

卡片事件能力说明 ArkTS卡片中提供了postCardAction()接口用于卡片内部和提供方应用间的交互&#xff0c;当前支持router、message和call三种类型的事件&#xff0c;仅在卡片中可以调用。 接口定义&#xff1a;postCardAction(component: Object, action: Object): void 接口…

年度总结 | 回味2023不平凡的一年

目录 前言1. 平台成就2. 自我提升3. Bug连连4. 个人展望 前言 每年CSDN的总结都不能落下&#xff0c;回顾去年&#xff1a;年度总结 | 回味2022不平凡的一年&#xff0c;在回忆今年&#xff0c;展望下年 1. 平台成就 平台造就我&#xff08;我也造就平台哈哈&#xff09; 每…

基于 LangChain + GLM搭建知识本地库

一种利用 langchain 思想实现的基于本地知识库的问答应用&#xff0c;目标期望建立一套对中文场景与开源模型支持友好、可离线运行的知识库问答解决方案。 受GanymedeNil的项目document.ai和AlexZhangji创建的ChatGLM-6B Pull Request启发&#xff0c;建立了全流程可使用开源模…

UE4运用C++和框架开发坦克大战教程笔记(十三)(第40~42集)

UE4运用C和框架开发坦克大战教程笔记&#xff08;十三&#xff09;&#xff08;第40~42集&#xff09; 40. 多按键绑定41. 自动生成对象42. 资源模块数据结构测试自动生成对象按资源类型生成对象 40. 多按键绑定 上节课实现了按键绑定系统的 4 种基础绑定&#xff0c;这节课来…

探索 Vue 异步组件的世界:解锁高效开发的秘密(上)

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

008、所有权

所有权可以说是Rust中最为独特的一个功能了。正是所有权概念和相关工具的引入&#xff0c;Rust才能够在没有垃圾回收机制的前提下保障内存安全。 因此&#xff0c;正确地了解所有权概念及其在Rust中的实现方式&#xff0c;对于所有Rust开发者来讲都是十分重要的。在本文中&…

原型链补充

1.什么是原型对象 函数的独有属性,他用prototype来表示,可以在函数的prototype上挂载一些公用的属性和方法,供实例化对象来访问。 2.__proto__属性 这个属性每一个对象都有,实例化对象就是通过这个属性,来访问原型对象上的属性和方法的。 3.三者之间的关系 1.在构造函数的原型…

Linux驱动学习—pinctl和gpio子系统

1、pinctl和gpio子系统&#xff08;一&#xff09; 1.1pinctrl 子系统主要工作内容 <1>获取设备树中 pin 信息&#xff0c;管理系统中所有的可以控制的 pin&#xff0c; 在系统初始化的时候&#xff0c; 枚举所有可以控制的 pin&#xff0c; 并标识这些 pin。 <2>…

Unity坦克大战开发全流程——结束场景——失败界面

结束场景——失败界面 在玩家类中重写死亡函数 在beginPanel中锁定鼠标

数据结构【线性表篇】(三)

数据结构【线性表篇】(三&#xff09; 文章目录 数据结构【线性表篇】(三&#xff09;前言为什么突然想学算法了&#xff1f;为什么选择码蹄集作为刷题软件&#xff1f; 目录一、双链表二、循环链表三、静态链表 结语 前言 为什么突然想学算法了&#xff1f; > 用较为“官方…