526互联

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

发布时间 2023-12-31 20:37:39作者: LiangSenCheng小森森
/**
     * 等比缩放
     * @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,
      };
    }

原文链接

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