;

LiangSenCheng博客

接受小程序定制「包括但不限于课设、毕设等,急单不接、二手单不接」

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元素根据父级元素宽高缩放

posted @   LiangSenCheng小森森  阅读(35)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!

文章目录[-]返回顶部

  1. 原文链接
点击右上角即可分享
微信分享提示