JavaScript DOM元素長寬等比例縮放

我們經常遇到長寬隨視窗變化等比縮放的例子，比如視訊網上中間的視訊案例、等比縮放的盒子圖片等等。

公式

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

求寬度 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}}
複製程式碼

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

執行效果圖

寬屏

高屏

方形屏

*版權宣告：本文為原創文章，未經允許不得轉載。