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}}
複製代碼

注意：考慮到結果精度問題，此源碼內結果集沒有進行整行運算，若有需求能夠在使用該結果處進行整形或者在源碼內補充便可！

運行效果圖

寬屏

高屏

方形屏

*