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; } 复制代码
上述代码中, 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}} 复制代码
注意:考虑到结果精度问题,此源码内结果集没有进行整行运算,如有需求可以在使用该结果处进行整形或者在源码内补充即可!
以上所述就是小编给大家介绍的《JavaScript DOM元素长宽等比例缩放》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- Rem 等比适配始末
- 网页图片等比例缩小实现方案总结以及最佳实践
- HQChart 1.9334 版本发布,增加等比坐标、黄金分割坐标、等分坐标
- [译] 为什么要做特征缩放,怎么做特征缩放,什么时候做特征缩放?特征缩放三连了解一下
- golang使用nfnt缩放图片
- 特征工程之特征缩放 & 特征编码
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
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》 这本书的介绍吧!