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;
}

上述代码中,wrapWwrapH是外容器的,cWcH是要进行比例调控的容器。 首先我们要先计算出一个方向的缩放宽度,判断是否超出外容器,如果没有超出,那么表示等比缩放在该外容器内,如果超出,则反向进行计算。

源码

/**
 * 比例缩放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}}

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

运行效果图

宽屏

高屏

方形屏

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

发布时间:2018-11-07