JavaScript DOM元素長寬等比例縮放

摘要： 我們已經知道根據比例求長寬公式是： 求寬度w = h / ratio 求高度h = w * ratio 準備 根據公式此時我們需要準備，一個外容器dom和一個進行等比縮放的容器dom 核心程式碼 let h = wrapW * ratio...

我們已經知道根據比例求長寬公式是：

求寬度w = h / ratio

求高度h = w * ratio

準備

根據公式此時我們需要準備，一個外容器dom和一個進行等比縮放的容器dom

核心程式碼

let h = wrapW * ratio;
if (h <= wrapH) {
cW = wrapW;
cH = h;
} else {
let w = wrapH / ratio;
cW = w;
cH = wrapH;
}
複製程式碼

上述程式碼中，wrapW 與wrapH 是外容器的，cW 與cH 是要進行比例調控的容器。 首先我們要先計算出一個方向的縮放寬度，判斷是否超出外容器，如果沒有超出，那麼表示等比縮放在該外容器內，如果超出，則反向進行計算。

原始碼

/**
 * 比例縮放js
 * @param wrap 外容器
 * @param container 比例調控的容器
 * @param ratio 比例值
 * @returns {{width: number, height: number, residueW: number, residueH: number}}
 * 返回值：width:比例寬度, height:比例高度, residueW: 剩餘的寬度, residueH: 剩餘的高度
 */
function aspectRatio(wrap, container, ratio = 9 / 16) {
// w = h / ratio, h = w * ratio
let wrapW = wrap.clientWidth;
let wrapH = wrap.clientHeight;
let cW = container.clientWidth;
let cH = container.clientHeight;

let h = wrapW * ratio;
if (h <= wrapH) {
cW = wrapW;
cH = h;
} else {
let w = wrapH / ratio;
cW = w;
cH = wrapH;
}

return {
width: cW,
height: cH,
residueW: wrapW - cW,
residueH: wrapH - cH
};
};

// 呼叫示例
// aspectRatio(wrapDom, ContainerDom, (9 / 16)); // {{width: number, height: number, residueW: number, residueH: number}}
複製程式碼

注意：考慮到結果精度問題，此原始碼內結果集沒有進行整行運算，如有需求可以在使用該結果處進行整形或者在原始碼內補充即可！