我们经常遇到长宽随窗口变化等比缩放的例子, 比如视频网上中间的视频案例, 等比缩放的盒子图片等等.
公式
我们已经知道根据比例求长宽公式是:
求宽度 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}}
注意: 考虑到结果精度问题, 此源码内结果集没有进行整行运算, 如有需求可以在使用该结果处进行整形或者在源码内补充即可!
运行效果图
宽屏
高屏
方形屏
来源: https://juejin.im/post/5be297f16fb9a049aa6e8dcb