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

/**
     * 等比缩放
     * @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元素根据父级元素宽高缩放

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

2023年度总结——关于如何认清自己是个FW

前言 不到各位有没有今年过得特别快的感觉。写总结时候一整理&#xff0c;我敲&#xff0c;我今年这么忙&#xff1f; 从三月份开说 三月份 这段时间刚开学&#xff0c;还算比较懵懂。不过初生牛犊不怕虎&#xff0c;那个寒假学了点怎么挖edusrc&#xff0c;开学迫不及待地…

AI按理说应该最擅长理工,为啥先冲击文艺行业?

介绍 本人数据AI工程师&#xff0c;我的观点对全行业都有冲击&#xff0c;当AI大模型持续进化之时&#xff0c;没有一家公司能独善其身。 本文从产业架构上、论文体量、基础Pass能力、通用大模型、AI开源社区、业务属性大模型、内容消费工具、创作工具赛道、企业服务这些板块…

day12--java高级编程:网络通讯

5 Day19–网络通信(Socket通信) 说明&#xff1a; io流是跟本地的文件进行数据的传输&#xff0c;读或者写。网络通信&#xff1a;数据在网络中进行的传输。 本章专题与脉络 1. 网络编程概述 Java是 Internet 上的语言&#xff0c;它从语言级上提供了对网络应用程序的支持&…

常用的 MySQL 可视化客户端

数据库可视化客户端&#xff08;GUI&#xff09;让用户在和数据库进行交互时&#xff0c;能直观地查看、创建和修改对象&#xff0c;如&#xff1a;表、行和列。让数据库操作变得更方便了。 今天&#xff0c;我们来了解下目前市场上最常用的 MySQL 可视化客户端。 官方&#x…

Stata18软件安装包下载及安装教程

Stata 18下载链接&#xff1a;https://docs.qq.com/doc/DUm5pRlFJaWV5aWtY 1.选中下载好的安装包&#xff0c;右键选择解压到“Stata18”文件夹 2.选中“SetupStata18.exe”&#xff0c;右键以管理员身份运行 3.点击“Next” 4.选择“I accept.....”,选择“Next” 5.点击“Nex…

MySQL Too many connections报错

MySQL 时不时出现Too many connections报错&#xff0c;重启MySQL就好了 但是过段时间又出现 一、解决方案&#xff1a; 1.修改mysql最大连接数 set global max_connections500; 以上是修改立即生效的&#xff0c;重启MySQL就会还原回去 在MySQL配置文件修改 max_connection…

matalb实践(十二):减肥

1.题目 2.解答 2.1模型假设 1.体重增加正比于吸收的热量&#xff0c;平均每8000kcal增加体重1kg 2.身体正常代谢引起的体重减少正比于体重&#xff0c;每周每千克体重消耗热量一般在200kcal至320kcal之间&#xff0c;且因人而异&#xff0c;这相当于体重70kg的人每天消耗2000k…

【ECharts系列】ECharts 图表渲染问题解决方案

1 问题描述 echats 渲染&#xff0c;第一次的时候只出现Y轴数值&#xff0c;不出现X轴数值&#xff0c;切换下页面&#xff0c;X轴数值就能出现。 2 原因分析 如果在使用ECharts渲染时&#xff0c;X轴数值只在切换页面后才出现&#xff0c;可能是因为ECharts在初始化时没有正确…

计算机视觉:朗伯光度立体法(Lambertian Photometric Stereo)

计算机视觉&#xff1a;朗伯光度立体法&#xff08;Lambertian Photometric Stereo&#xff09; 光度立体法简介朗伯光度立体法算法原理朗伯光度立体法matlab程序示例Albedo图Normal图Re_rendered图 参考文献 光度立体法简介 光度立体法&#xff0c;即Photometric Stereo, 最早…

Layui弹窗带标签可切换图表的应用Demo

提供Layui弹窗带页签的Demo写法 文章目录 前言一、展示效果二、详细代码1.代码2.简单释义 总结 前言 之前因为有需求&#xff0c;需要开发Layui的弹出框&#xff0c;同时弹窗框需要支持&#xff0c;页签点击切换内容&#xff0c;特此整理了这一篇文章&#xff0c;提供给需要的…

【Image】超硬核数学推导——WGAN的先“破”后“立”

GAN的实现 上一篇文章中我们说到了GAN的数学解释 min ⁡ G max ⁡ D V ( D , G ) E x ∼ p data ( x ) [ log ⁡ D ( x ) ] E z ∼ p z ( z ) [ log ⁡ ( 1 − D ( G ( z ) ) ) ] − log ⁡ 4 2 J S D ( p data ∥ p g ) ≥ − log ⁡ 4 , where [ p d a t a p g ] \mi…

力扣题目学习笔记(OC + Swift)24. 两两交换链表中的节点

24. 两两交换链表中的节点 给你一个链表&#xff0c;两两交换其中相邻的节点&#xff0c;并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题&#xff08;即&#xff0c;只能进行节点交换&#xff09;。 方法一、递归 首先定义递归终止条件&#xff1a; …

ssm基于web 的个人时间管理系统+vue论文

基于web 的个人时间管理系统的设计与实现 摘要 当下&#xff0c;正处于信息化的时代&#xff0c;许多行业顺应时代的变化&#xff0c;结合使用计算机技术向数字化、信息化建设迈进。传统的个人时间信息管理模式&#xff0c;采用人工登记的方式保存相关数据&#xff0c;这种以人…

DsPdf:GcPdf 7.0 for NET Crack

DsPdf:GcPdf 7.0 用于全面文档控制的功能丰富的 C# .NET PDF API 库 PDF 文档解决方案&#xff08;DsPdf&#xff0c;以前称为 GcPdf&#xff09;可让您快速、高效地生成文档&#xff0c;且无需依赖任何内存。 在 C# .NET 中生成、加载、编辑和保存 PDF 文档 支持多种语言的全…

为什么不应该在 SAN/NAS 设备上运行 MinIO(还有一个例外)

我们想分享一下我们在 SAN/NAS 设备上运行 MinIO 的想法。首先&#xff0c;您可以在 SAN/NAS 设备上运行 MinIO。虽然这是可能的&#xff0c;但这不是一个好主意&#xff0c;我们强烈建议客户不要采用这种方法。不要让友好的邻居 SAN/NAS 设备供应商在没有先阅读以下内容的情况…

软件有效找不到dll文件,五种可靠的解决dll方法分享

电脑已经成为我们生活和工作中不可或缺的工具。然而&#xff0c;由于各种原因&#xff0c;电脑可能会出现一些问题&#xff0c;其中之一就是“电脑提示dll文件缺失”。这个问题可能会给我们的生活和工作带来很大的困扰&#xff0c;因此&#xff0c;我希望通过分享我的心得体会&…

学习路径概览

根据codewave 低代码官方的资料&#xff0c;我们以一个简单的初级采购管理系统为例&#xff0c;带大家进行学习。学习的案例框架如下&#xff1a; https://ik4mh7u2np.feishu.cn/docx/NjyEd9qD5oElkoxJhapc3fV4nPe?fromfrom_copylink​​​​​​​ 主要分为以下四个学习模块

ros2 run传递参数的格式

ros2 run teleop_twist_keyboard teleop_twist_keyboard --ros-args -r /cmd_vel:/model/vehicle_blue/cmd_vel #这个只能用于重命名节点名称可以用以下语法直接从命令行中设置参数&#xff1a; ros2 run package_name executable_name --ros-args -p param_name:param_value …

centos7.9 TCP 加速

BBR是谷歌开发的新的TCP加速算法&#xff0c;在网络状况不好的服务器上开启TCP的bbr&#xff0c;可以在无需增加任何硬件投入的情况下实现网络加速&#xff0c;并且客户端无需做任何配置&#xff0c;因此使用起来非常的方便。TCP加速对网络状况较好的内网环境&#xff0c;或者大…

【阅读笔记】Semi-supervised Domain Adaptation in Graph Transfer Learning

Background 真实世界的图上节点的标签数据是很难拿到的。 因此图转移学习被提出将知识从标记的源图转移出来&#xff0c;以帮助预测域变化的目标图中节点的标签。 尽管图迁移学习算法取得了重大进展&#xff0c;但它们通常假定源图中的所有节点都被标记出来了。 因此文章定义…