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

/*** 等比缩放* @param wrap 外部容器* @param container 待缩放的容器* @returns {{width: number, height: number}}* 返回值:width:宽度, height:高度*/aspectRatio(wrap: any, container: any) {// w = h / ratio, h = w * ratioconst 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.hqwc.cn/news/312005.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Qt基础之四十五:Qt国际化(I18N)

国际化的英文表述为Internationalization,通常简写为I18N(首尾字母加中间的字符数),这种奇葩的缩写方式,让我想起了NBA球星“字母哥”。 下面看下Qt实现的动态语言切换效果。 一.效果 二.源码 QHSettingDialog.h #ifndef QHSETTINGDIALOG_H #define QHSETTINGDIALOG_H#…

DevExpress 皮肤改变触发后触发的事件,用来保存皮肤配置

代码&#xff1a; private UserLookAndFeel userLookAndFeel; public MainGeneral() {InitializeComponent();// 创建 UserLookAndFeel 实例userLookAndFeel new UserLookAndFeel(this);// 订阅 StyleChanged 事件userLookAndFeel.StyleChanged UserLookAndFeel_StyleChange…

使用python快速开发各种聊天机器人应用

开源项目 Panel及其最新版本1.3推出了一项令人兴奋且备受期待的新功能&#xff1a;聊天界面小部件。这项新功能开辟了一个充满神奇的新世界&#xff0c;使人工智能聊天机器人的创建比以往任何时候都更加容易和用户友好。 今天将学习如何使用 Panel 的ChatInterface 组件并构建&…

磁盘管理-------RAID卡

目录 一、RAID概述 二、常见类型 &#xff08;一&#xff09;RAID 0 &#xff08;二&#xff09;RAID 1 &#xff08;三&#xff09;RAID 5 &#xff08;四&#xff09;RAID 6 &#xff08;五&#xff09;RAID 10 &#xff08;六&#xff09;总结 三、创建RAID &…

XTU-OJ-1452-完全平方数-笔记

参考博客 XTU-OJ 1452-完全平方数 题意 输入一个奇数&#xff0c;使得 n*(2*an-1)/2是一个完全平方数&#xff0c;求满足条件的最小的a 1<n<1e9 先输入样例数&#xff0c;再输入n 输入 2 1 3 输出 0 2 代码 #include<stdio.h>#define N 1000000010int a…

1.PHP简单入门

1.PHP代码执行方式 PHP是在服务器端执行&#xff0c;然后返回给用户结果。 如果直接使用浏览器打开&#xff0c;就会解析为文本。 意思是说&#xff0c;浏览器通过 http请求&#xff0c;才能够执行php页面。 2.PHP代码框架 开启本机服务器&#xff08;下载软件略&#xff09…

2023年度业务风险报告:四个新风险趋势

目录 倒票的黄牛愈加疯狂 暴增的恶意网络爬虫 愈加猖獗的羊毛党 层出不穷的新风险 业务风险呈现四个趋势 防御云业务安全情报中心“2023年业务风险数据”统计显示&#xff0c;恶意爬虫风险最多&#xff0c;占总数的37.8%&#xff1b;其次是虚假账号注册&#xff0c;占18.79%&am…

14个强大的JS库

文章目录 一、前言二、Handsontable&#xff1a;高效的数据网格处理库2.1、数据绑定和验证2.2、过滤和排序2.3、文件导出2.4、多框架兼容性2.5、丰富的附加功能2.6、GitHub受欢迎程度 三、Calendar&#xff1a;全功能可定制日历库3.1、多种视图类型3.2、任务和里程碑管理3.3、鼠…

操作注册表

命令说明&#xff1a; regedit&#xff08;快速打开注册表命令&#xff09; reg query 显示注册表的所有子项和值 reg delete 从注册表删除项或值 /v EntryName &#xff08;注册表项和子项名称&#xff09; 删除子项下的特定项。如果未指定子项&#xff0c;则将删除子项…

C#,入门教程(03)——Visual Studio 2022编写彩色Hello World与动画效果

C#&#xff0c;入门教程(01)—— Visual Studio 2022 免费安装的详细图文与动画教程https://blog.csdn.net/beijinghorn/article/details/123350910 C#&#xff0c;入门教程(02)—— Visual Studio 2022开发环境搭建图文教程https://blog.csdn.net/beijinghorn/article/detail…

深度学习从入门到不想放弃-5

看了一眼这个文章系列,居然第四集是11月5号写的,这25天可见发生了多少事情... 今天我们讲讲特征,算是基础篇的一个番外篇延伸,我省着在后面的文章里写了,怕扰乱了思路 严格来说这个属于基础机器学习领域里的了,我又不讲决策树,贝叶斯,隐马尔可夫啥的(不在这个系列写,…

Linux环境grep搜索方法记录

1 grep grep 命令&#xff0c;用来搜索字符串所在位置&#xff0c;可以具体到不同文件&#xff0c;不同行&#xff1b; 在Linux 下&#xff0c;查看命令释义如下 zhaocubuntu2004:~$ grep --help Usage: grep [OPTION]... PATTERNS [FILE]... Search for PATTERNS in each FI…