首页 > 编程语言 >JavaScript元素根据父级元素宽高缩放

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

时间:2023-12-31 20:45:49浏览次数:38  
标签:cH container 缩放 cW 元素 height width JavaScript

/**
     * 等比缩放
     * @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元素根据父级元素宽高缩放

标签:cH,container,缩放,cW,元素,height,width,JavaScript
From: https://www.cnblogs.com/LiangSenCheng/p/17937959

相关文章

  • JavaScript调用系统邮件快速分享
    在前端使用邮件分享进行快速分享~,详情参考->MDN自定义参数subject:主题cc:抄送到次要收件人(与邮件有关但无需做出应答的个人或组织)bcc:密送到其他收件人(主要、次要收件人不应该获得密送收件人的身份)body:邮件内容注:每个字段的值都必须进行编码(也就是,带有......
  • JavaScript圆形转多边形经纬度数组算法及示例
    前言在地理信息系统(GIS)和地图应用中,有时需要将圆形区域表示为多边形的经纬度数组对象。本文将介绍如何使用JavaScript实现圆形转多边形经纬度数组的算法,并提供一个示例来演示其用法。概述圆形转多边形经纬度数组的算法的目标是将给定的圆形区域表示为多边形的经纬度数组对象。这......
  • day03 代码随想录算法训练营 203. 移除链表元素
    题目:203.移除链表元素我的感悟:题目里的节点是已经给好的,创建虚拟节点,是为了方便处理头节点。加油,我可以的!!!!!理解难点:节点已经给好的创建虚拟节点代码难点:p是临时变量,类似于foriinrange(10)这里的i,本身是用完就扔的。返回值为什么不能是p.next?因为p是一个指针,......
  • javaScript中如何判断一个url有没有query
    JavaScript中如何判断一个URL有没有Query在JavaScript中,我们可以使用正则表达式或内置URL对象来判断一个URL是否包含查询参数(query)。本文将介绍两种方法,并附带代码示例来解决这个具体的问题。方法一:使用正则表达式我们可以使用正则表达式来判断URL中是否包含查询参数。以下是一......
  • 高级的JavaScript10个技巧
    提升开发技能:10个高级的JavaScript技巧 前言在这个快速发展的数字时代,JavaScript作为一种广泛应用的编程语言,其重要性愈发凸显。为了在竞争激烈的开发领域中保持竞争力,不断提升自己的技能是至关重要的。本文小编将您介绍10个高级的JavaScript技巧,旨在帮助开发者们在编码过程......
  • 数组名不是首元素地址的情况
    1.&arr-&数组名-数组名不是首元素地址-数组名表示整个数组--&数组名,取出的是整个数组的地址2.sizeof(arr)-sizeof(数组名)-数组名表示的整个数组-sizeof(数组名)计算的是整个数组的大小#define_CRT_SECURE_NO_WARNINGS1#include<stdio.h>intmain(){ //两种数组名不是首元素......
  • JavaScript改变this指向的三种方法
    JavaScriptcall()方法它可以用来调用所有者对象作为参数的方法。通过 call(),您能够使用属于另一个对象的方法。varperson={fullName:function(){returnthis.firstName+""+this.lastName;}}varperson1={firstName:"Bill",lastN......
  • JS 鼠标拖拽元素移动
    代码示例<!DOCTYPEhtml><htmllang="zh-CN"><head> <metacharset="UTF-8"> <title>Document</title> <style> #wrap{ width:100px; height:100px; background-color:green; position:......
  • JavaScript的apply、call、bind方法
    JavaScript的apply、call、bind方法概述简述这三个方法存在一定的迷惑性,而且对于刚看ES6的人来说,十分难理解,这里为了以后我可能会复习到这个知识点,做出详解。总的来说,这三个方法都是将某某某(某01)绑定在某某某(某02)上,然后执行这个被绑定的某某某(某01),或者单纯就是绑定不执行。详......
  • python_selenium定位页面元素
    页面元素常用的定位方法有id、name、css、xpathid和name直接通过对应的值定位class属性值有多个值时,使用css选择器定位只需要其中一个属性值即可,使用xpath时,属性值需要全部写上示例:<inputtype=""autocomplete="on"placeholder="密码"id="pwdid"name="password"c......