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,
};
}
原文链接
作者:LiangSenCheng小森森 开源分享汇 公众号
出处:https://www.cnblogs.com/LiangSenCheng/p/17937959
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。如有问题或建议请联系作者,非常感谢。