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}}
复制代码

注意：考虑到结果精度问题，此源码内结果集没有进行整行运算，如有需求可以在使用该结果处进行整形或者在源码内补充即可！

运行效果图

宽屏

高屏

方形屏

*版权声明：本文为原创文章，未经允许不得转载。