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

2023-12-31 21:30:31
/**
     * 等比缩放
     * @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元素根据父级元素宽高缩放

在这里插入图片描述

文章来源:https://blog.csdn.net/github_38967228/article/details/135319322
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。