JavaScript DOM元素长宽等比例缩放

5,233 阅读1分钟

我们经常遇到长宽随窗口变化等比缩放的例子,比如视频网上中间的视频案例、等比缩放的盒子图片等等。

公式

我们已经知道根据比例求长宽公式是:

求宽度 w = h / ratio

求高度 h = w * ratio

准备

根据公式此时我们需要准备,一个外容器dom和一个进行等比缩放的容器dom

核心代码

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

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

源码

/**
 * 计算盒子
 * @description 用于描述盒子大小(可用于等比缩放等应用)
 * @param width
 * @param height
 * @param minWidth
 * @param minHeight
 * @param maxWidth
 * @param maxHeight
 * @returns {{residueH: number, residueW: number, width: number, height: number}}
 */
function computeBox({ width, height, minWidth, minHeight, maxWidth, maxHeight }) {
  minWidth = minWidth === void 0 ? 0 : Math.max(0, minWidth);
  minHeight = minHeight === void 0 ? 0 : Math.max(0, minHeight);
  maxWidth = maxWidth === 'none' ? width : Math.max(minWidth, maxWidth);
  maxHeight = maxHeight === 'none' ? height : Math.max(minHeight, maxHeight);

  // w = h / ratio, h = w * ratio
  const ratio = height / width;

  if (width < minWidth) {
    width = minWidth;
    height = minWidth * ratio;
  }
  if (height < minHeight) {
    width = minHeight / ratio;
    height = minHeight;
  }

  if (width > maxWidth) {
    width = maxWidth;
    height = maxWidth * ratio;
  }
  if (height > maxHeight) {
    width = maxHeight / ratio;
    height = maxHeight;
  }

  const length = Math.pow(10, 5);
  width = Math.round((width * length)) / length;
  height = Math.round((height * length)) / length;

  return {
    width: width,
    height: height,
    residueW: maxWidth - width,
    residueH: maxHeight - height
  };
};

// 示例
const box = computeBox({
  width: 1920, // cw
  height: 1080, // cH
  maxWidth: 500, // wrapW
  maxHeight: 500 // wrapH
}); // => {{ width: number, height: number, residueW: number, residueH: number }}

运行效果图

宽屏

高屏

方形屏

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