JavaScript DOM元素长宽等比例缩放

栏目: JavaScript · 发布时间: 6年前

内容简介:我们已经知道根据比例求长宽公式是:求宽度求高度

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

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

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


以上所述就是小编给大家介绍的《JavaScript DOM元素长宽等比例缩放》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

HTTP

HTTP

David Gourley、Brian Totty、Marjorie Sayer、Anshu Aggarwal、Sailu Reddy / O'Reilly Media / 2002-10-7 / USD 54.99

Product Description Web technology has become the foundation for all sorts of critical networked applications and far-reaching methods of data exchange, and beneath it all is a fundamental protocol......一起来看看 《HTTP》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

MD5 加密
MD5 加密

MD5 加密工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器