JavaScript元素根据父级元素宽高缩放

最新推荐文章于 2024-12-22 07:30:00 发布

开源分享汇

最新推荐文章于 2024-12-22 07:30:00 发布

阅读量627

点赞数 8

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/github_38967228/article/details/135319322

版权

本文介绍了一个JavaScript函数，用于计算给定外部容器（wrap）和待缩放容器（container）时，如何保持等比缩放并返回新的宽度（width）和高度（height）。函数考虑了三种情况：宽度大于高度、高度大于宽度和两者相等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/**
     * 等比缩放
     * @param wrap 外部容器
     * @param container 待缩放的容器
     * @returns {{width: number, height: number}}
     * 返回值：width:宽度, height:高度
    */
    aspectRatio(wrap: any, container: any) {
      // w = h / ratio, h = w * ratio
      const wrapW = wrap.width;
      const wrapH = wrap.height;
      let cW = container.width;
      let cH = container.height;
      const rc = cW / cH;
 
      if (rc > 1) {
        // const w = wrapH * ratio;
        if (cW <= wrapW) {
          cW = wrapW;
          cH = wrapW / rc;
        }
      } else if (rc < 1) { // w:h = w1:h1 =>
        if (cH <= wrapH) {
          cH = wrapH;
          cW = rc * cH;
        }
      } else if (rc === 1) {
        const v = wrapW > wrapH ? wrapH : wrapW;
        cH = v;
        cW = v;
      }
 
      return {
        width: cW,
        height: cH,
      };
    }