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